Bulgari

aqva.bulgari.com

Expensive perfumes and products deserve a unique website.

What makes this site so attractive?

Let’s have a look at how Bulgari presents a range of their Aqva perfumes in this visually attractive one page scrolling website.

Quick Overview

The layout untraditionally starts in the middle of the page so the user can scroll both up and down.

It uses jQuery and GreenSock to achieve the smooth transitions between each section.

The elegant transitions and creative, seamless use of full screen video makes this site an easy target for our deconstruction.

Warning: We’ll go into details with this one. Ready?

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

Full-screen Menu

Before we look at the seamless transition between sections, let’s have a look at the fading in of the full screen menu.

The jQuery code on this site has been uglified, probably using Grunt Uglify, but let’s try to understand the GreenSock tweens.

I’ve simplified the code for now, so we can see what’s happening on click.

killTweensOf will surprisingly kill all the tweens of the #header-nav-menu element.

Then we check whether #header has class .menu-visible.

If it does, we animate #header-nav-menu to opacity: 0 in 0.3sec and onComplete remove the .menu-visible from #header.

If it doesn’t, we add the class .menu-visible and animate #header-nav-menu to opacity: 0;

transition: height .3s ease; the #header-nav-menu-wrapper completes the code creating this effect.

Main Structure

Firstly let’s explore the html structure of the whole page, this will give us an overview before we dive into details.

Each section has it’s own container ‘.site-section’ and the currently active sections also have .on-screen class.

You can see some inline CSS styles, which is not a bad practice from coding email templates, these are CSS styles generated by the JavaScript.

The position: relative on the full-screen .site-section-content is used to position most of the nested elements exactly where you want by using position: absolute.

The previous and next transparent buttons are both positioned absolute within each of the .site-section-content containers.

Seamless Transitions Between Sections

The seamless slow transition between the initial screen and sections above and below is an effect worth looking at closer.

How was this done? I don’t know, let’s find out.

Each section has its height calculated based on the browser height, apart from the #home-section.

The #home-section is 3 times bigger than the browser window and the transparent images of clouds and rocks are positioned to the top and bottom of the container.

The positioning of the ‘previous’ and ‘next’ buttons is then recalculated using JavaScript.

Now what happens when you try to go to the previous slide?

Please note that I am referring to the ‘previous’ and ‘next’ sections to match the classes of these links. I would personally use .next for sections lower down the page and .previous for above sections.

The slide which we are scrolling to gets .on-screen which makes it appear on top of everything else, but still below the #home-section.

Then the #home-section animates to a new offset -3077px which makes it disappear out of the viewport.

Pretty cool, huh?

Scrolling up would animate the same container the other way as shown in the image below.

Animating Titles

The last item we’ll look at today, is the text animation of the titles in the slideshow.

You’ll see each letter animating with a slight delay after the previous one.

This effect is created using GreenSocks SplitText plugin.

The simplified syntax looks like this:

I might have missed something out, but the principle is to split the titles text into individual letters, set the perspective to 400 and then stagger the animations one after another using the staggerFrom method.

Conclusion

Wow, that was quite a deconstruction, I might call this one a mega deconstruction!

Hope you’ve learned something new and as always, I encourage you to open the developer tools and explore the code on your own.

You’ll learn heaps by making it a part of your front end developer routine.

Let me know what you think about the site in the comments below.

Happy deconstructing.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

4 Comments

  1. Apsolut
    Reply

    Plus image on video is set to bottom ‘home-section__bottom-img-bg’ with z-index over video.. so we scroll the video and image in the same time, its trick that make it more Cool when we Scroll to next video

  2. César Mejía
    Reply

    Me gustó mucho la explicación del código, pienso utilizar muchas partes en un proyecto nuevo.

    Sólo tengo una duda acerca del vídeo, ¿Cómo puedo reproducir un vídeo en forma de streaming con HTML5? quisiera que no se congele el video mientras carga.

    Saludos.

    —- Google Translate —-
    I liked the explanation of the code, I think many parts used in a new project.

    I have only one question about the video, how I can play a video streaming as HTML5? I want the video does not freeze while loading.

    Greetings.

  3. Asif Hussain
    Reply

    It’s very good deconstruction but I think it will be more easy to understand & helpful for us if you provide a demo file as well like you did in one-page-scroll-with-animations.

    • Petr Tichy
      Reply

      Thanks for the suggestion Asif. I’ll see what I can do in the future. Cheers

Leave a Reply to Petr Tichy

Click here to cancel reply.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">