News

Use jQuery to create scroll-activated page transparency

The rush to embrace best SEO practices can sometimes have us focusing more on our content than on how that content is delivered.

jQueryLexus

The rush to embrace best SEO practices can sometimes have us focusing more on our content than on how that content is delivered.

jQueryLexus

inspiration: www.lexus-int.com/magazine

The most successful websites are always those that strike the right balance between content quality and content delivery.

So with that in mind, let’s look at some examples of using JavaScript and CSS to present your content to the user in a distinctive and engaging way, with the help of the fullPage.js plugin and some inspiration from the Lexus magazine site

BUILD WITH FULLPAGE

Plugin installation

Go to alvarotrigo.com/fullPage and download the fullPage.js plugin. Call your files in the head of your index.html. We will be using all three available scripts.

001 <script src="jquery.min.js"></    script>
002 <script src="jquery.fullPage.min.    js"></script>
003 <script src="jquery.slimscroll.min.    js"></script>
004 <script src="jquery.easings.min.    js"></script>

Base HTML

Give the body an ID to set the background image. Add two sections within a div with the ‘fullpage’ ID, the second containing a ‘grid-box’ div.

001 <body id="background">
002 <div id="fullpage">
003 <section class="section wrap0"     id="section0"></section>
004 <section class="section wrap1"     id="section1">
005 <div class="grid-box"></div>
006 </section>    
007 </div> 
008 </body>

Body background

Let’s implement a fullscreen background using the background-size: cover property. Don’t forget to include vendor prefixes for the declaration.

Section content

Place 12 divs (the content you’re using) within the ‘grid-box’ div, each pulling its own image. In this tutorial we are using bootstrap.css to assign column properties.

001 <section class="section" id="section0">
002 <h1>View Our Photos</h1>
003 <h2>&dArr;</h2>
004 </section>    
005 <section class="section wrap1" id="section1">
006 <div class="grid-box">
007 <div class="col-md-4"><img src="images/1.jpg"/></div>
008 (repeat x 11)
009 </div>    
010 </section>    

Base CSS

Our second section needs to have some transparency to the background and the ‘grid-box’ div should have its width, margin and other properties declared before setting the content animation.

Style elements

Add some styling to the content of our first section, which serves as an intro to our main (second) section, in tandem with our fullpage background image. You can add more content if you wish.

Initialise the plugin

Now we can place the basic initialisation script for fullPage.js into our header, below the declaration of the other script files. This will have fullPage working with only the default settings.

001 <script type="text/javascript">
002     $(document).ready(function() {
003         $('#fullpage').fullpage();
004     });
005     </script>

AfterLoad function

Add an afterLoad function to the initialisation script to begin the animation which will fade in the ‘grid-box’ content on section load. This adds an active class to the div which we can style individually.

001 afterLoad: function(anchorLink,     index){
002     if(index == 2){
003     $('.grid-box').addClass('active');
004 }
005 },
006 });

CSS transition

Now to complete the CSS transition, give the ‘grid-box’ div a starting opacity of 0.

×