Code Monkey home page Code Monkey logo

simplax's Introduction

Simplax.css

The simplest most barebones parallax effect.

This is my first open source framework. It's pretty basic but that's the benefit of it. The code is a simple breakdown of the parallax effect for anyone who doesn't want the hassle of having to edit a tonne of code. It's as simple as duplicating another item tag in the index.html and duplicating the item selector in the style.css. The cool thing is that the site should scale to fit your browser on any screen size, but if you do run into problems the code is setup for you to make changes at proper breakpoints.

Here's the current link to the example site:

http://simplax.mcnabj.com/

Here's some of the code:

The html tag:

<div class="gallery-item" id="item-1"></div>

Just copy, paste this under the list of tags, change the id item number (#) and the page will expand to fit your image.

The css selector:

item-1 {

   background-image: url(slideshow/simplax-info-1.png);
   
   }

Just copy and paste this under the list of item selectors, change the item number (#), and change the background-url: to the filename of your image name & location. It's that easy.

Extras:

For the more technically savvy there is the option of adding in tags to allow your webpage visitors to go to a specific point on the page.

Just an anchor tag in the

element. Finally change the href="" value to the id of the specific gallery element you would like the page to jump to.

The code should look like this:

<nav class="container">
   <div class="logo"></div>

   <a class="cuban-linx" href="#item-1"><h3>Example Link 1</h3></a>
   <a class="cuban-linx" href="#item-2"><h3>Example Link 2</h3></a>
   <a class="cuban-linx" href="#item-3"><h3>Example Link 3</h3></a>
</nav>

You may also want to change the site title to match the name of your project. Just change the text between the title tag and the h1 tag.

Here's the sample code:

<title>Simplax.css</title>

And

<h1>Change the name of your project here</h1>

Also if you want to change the logo just go to the #logo selector in style.css and change the background-image: url(); As well you should change the width and the height to your preferred pixel size.

The code should look like this:

logo {
   background-image: url(images/jm-logo-blue-circle.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   
   /** Matches the background size to the browser width **/
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height: 75px;
   width: 75px;
}

That's pretty much the basics of what are available to use. The whole point is to be as simple as possible so that Designers can design and drop their images into the code with ease. Any extras like transitions or js are up to the more capable users to add-on. I hope this is code becomes really useful for you.

simplax's People

Contributors

jamnab avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.