By
The rush to embrace best SEO practices can sometimes have us focusing more on our content than on how that content is delivered.
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>⇓</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.
