Case Study: Aquardens

Aquardens has been one of the largest watering places and spas in Europe

  • Share on Google
  • Share on Stumbleupon

Since 2012 Aquardens has been one of the largest watering places and spas in Europe, located close to Lake Garda amongst the amazing vineyards of Valpolicella and all the amenities of Verona.

The whole state-of-the-art structure, which represents an impressive investment, provides a full range of services including several swimming pools fed by thermal water at different temperatures, a wellness centre and a medical spa, as well as bars and restaurants, all designed for the complete leisure of visitors.

Each facility and location within the centre had to be shown in its full splendour in order for viewers to feel the warmth of those amazing spas and experience the unique atmosphere of the place.

We built a website characterised by a responsive layout in order to display all site content correctly on any resolution and device. Furthermore, intense use of the most advanced HTML5 and CSS3 techniques allowed us to raise the level of the site’s user experience, implementing features which make the navigation engaging and rewarding.

Let’s review together the details of our technical choices for building this website, its structure and its code.

Responsive Layout

In order to obtain such a responsive layout, we defined and implemented two separate structures at the same time. Depending on the resolution and the device, it serves a specific set of content. Even the menus are different depending on the device, always displaying only the relevant configuration.

For traditional monitor sizes, the internal sections display second level menus which can be navigated also by keyboard: scrolling vertically through the menu items makes the corresponding image load in the background, whilst scrolling horizontally displays the specific content of any selected item.

For mobile devices- thanks to the jQuery Cycle plugin- the structure changes, showing the images related to each section as a slideshow with the content as a description at the bottom of each picture.

  • Usability and accessibility

    Great attention was paid to the whole navigation experience from the user’s perspective, with specific solutions for full usability and accessibility of all site content.

    A complete and simple icon-path guideline was developed ad-hoc for PCs to provide an easy full-keyboard navigation, while there is a sliding option for mobile interfaces with touch-screen.

  • function bindKeys() {
        $('body').keyup(function (event) {
            if (event.keyCode == 39) {
                $('.next').trigger('click');
            }
            else {
                if (event.keyCode == 37) {
                    $('.prev').trigger('click');
                }
            }
        });
    }
    
    $(document).on('click', '.next, .prev', function (e) {
        ...
        ...
        e.preventDefault();
        History.pushState(null, null, $(this).attr("href"));
    });
    

    In order to allow a smoother reading of each section’s content, we implemented a special feature which involves the simultaneous scrolling of both content and images.

    When the copy exceeds the area of the image, the user can scroll down to the following paragraphs without difficulty, as the same relevant image stays fixed in the background until the copy’s end.

  • function checkPositionFloat() {
        windowTop = $(window).scrollTop();
        if (windowTop >= contentheight) {
            $(".cont-dx").css("position", "fixed").css("bottom", "0").css("top", "auto");
        }
        else {
            $(".cont-dx").css("position", "absolute").css("top", "0").css("bottom", "auto");
        }
    }
    

    Page Title Customisation

    A specific feature was added to customize the page’s title, so that every time there is a new data upload, the page’s title displays the label “Loading” to inform the user that the new content is being processed.

  • $(window).bind('statechange', function () {
        // recupero l'url
        var State = History.getState();
        var url = State.url;
        ...
        document.title = "Loading.. | Aquardens Parco termale in valpolicella";
        // gestisciAjax()
        manageAjax(url, idVoce, urlText);
    });
    

    Technology adopted

    We employed HTML5 and AJAX techniques for the navigation development, in order to avoid the page reload once the URL changes and to enhance the indexing of the page content.

    To create the fully navigable interactive-map of the park we implemented a jQuery UI draggable function.

  • $('#contDrag').draggable({
        cursor: "move",
        containment: [leftDrag, topDrag, 0, 0],
        helper: function () {
            return $('
    ').css('opacity', 0); }, drag: function (event, ui) { var p = ui.helper.position(); $(this).stop().animate({ top: p.top, left: p.left }, 1000, 'easeOutCirc'); $('.info').stop().animate({ "opacity": "0" }, 500); clearTimeout(timeInfo); }, stop: function (event, ui) { timeInfo = setTimeout("animInfo()", 500); } });

    Google Map API

    For Google Maps customisation we used the relevant Google APIs.

  • function initialize() {
        var verona = new google.maps.LatLng(45.505279, 10.828742);
        var mapOptions = {
            zoom: 12,
            center: verona,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        setMarkers(map, beaches);
    }
    

    Optimisation

    Due to the massive need for high quality full-screen images, there was a real risk of their being too much data to download. Therefore to meet the requirements of all resolutions and devices, we went for two separate solutions.

    For mobile devices- with displays of up to 1024px, large images are resized and optimised, making them quicker to download. For higher resolutions, the images are simply adapted to screen dimensions.

  • $('.fullbackground').each(function () {
        var imgSrc = $(this).attr("data-image");
        if (!monitor) {
            $(this).css({
                "height": wHeight,
                "background-image": "url(" + imgSrc + "?width=1024)"
            });
        }
    });
    

    Animations

    Menus

    Incredible effort went into creating animations as smooth and natural as possible.

    Starting from the homepage, all animations were designed to provide a clear touch of elegance and refinement to the page layout. Furthermore, a blur effect has been added to the top menu to show all menu items one by one as a gradient. To achieve this effect, we relied on the CSS3 Transition feature.

  • nav ul li a { 
        text-shadow: 0px 0px 3px #999; 
        color:transparent; 
    }
    
    .shadowanimate{
        transition: all 0.8s ease-out 0s; 
        -webkit-transition: all 0.8s ease-out 0s; 
        -moz-transition: all 0.8s ease-out 0s;
        -o-transition: all 0.8s ease-out 0s; 
        -ms-transition: all 0.8s ease-out 0s;
    
        text-shadow: none;color: #999; 
    }
    

    Home Boxes Effects

    For the popping-up effect added to the boxes at the bottom of the page, CSS3 Transform was also implemented:

  • #home-boxes .home-box .mask {
        background: url(../images/mask.png) repeat; 
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
        filter: alpha(opacity=0); 
        opacity: 0; 
        
        -webkit-backface-visibility: hidden; 
        
        -webkit-perspective:800px;
        -moz-perspective:800px;
        perspective:800px;
        
        -webkittransform: translate3d(0, 0, 0);
        
        -webkit-transition: opacity 0.3s ease-in 0.3s; 
        -moz-transition: opacity 0.3s ease-in 0.3s;
        -o-transition: opacity 0.3s ease-in 0.3s;
        -ms-transition: opacity 0.3s ease-in 0.3s;
        transition: opacity 0.3s ease-in 0.3s;
        
        height: 104px; 
        left: 5px; 
        overflow: hidden; 
        position: absolute; 
        top: 5px; 
        width: 272px;
    }
    
    #home-boxes .home-box h3 {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0); 
        opacity: 0; 
        background: transparent;
    
        -webkit-perspective:800px;
        -moz-perspective:800px;
        perspective:800px;
    
        -webkit-backfacevisibility: hidden; 
    
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    
        -webkit-transition: all 0.3s ease-in-out 0.1s;
        -moz-transition: all 0.3s ease-in-out 0.1s;
        -o-transition: all 0.3s ease-in-out 0.1s;
        -ms-transition: all 0.3s ease-in-out 0.1s; 
        transition: all 0.3s ease-in-out 0.1s;
    }
    
    #home-boxes .home-box.over .mask { 
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100); 
        opacity: 1;
    
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s; 
        -o-transition-delay: 0s; 
        -ms-transition-delay: 0s; 
        transition-delay: 0s;
    }
    
    #home-boxes .home-box.over h3 {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-backface-visibility: hidden;
        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -otransform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); 
    
        -webkit-transition-delay: 0.1s; 
        -moz-transition-delay: 0.1s;
        -otransition-delay: 0.1s;
        -ms-transition-delay: 0.1s; 
        transition-delay: 0.1s;
    }
    

    For the sliding layer effect of the box on the right side containing the descriptive copy for each section, CSS3 3D Rotate effect was used instead.

  • .cont-dx{ 
        display: none; 
        
        -webkit-perspective: 1200px; 
        -moz-perspective: 1200px; 
        -ms-perspective: 1200px; 
        -operspective: 1200px; 
        perspective: 1200px; 
        
        -webkit-perspective-origin: center center; 
        -moz-perspective-origin: center center; 
        -msperspective-origin: center center; 
        -o-perspective-origin: center center; 
        perspective-origin: center center; 
        
        -webkit-backfacevisibility: hidden; 
        -moz-backface-visibility: hidden; 
        -ms-backface-visibility: hidden; 
        -o-backface-visibility: hidden; 
        backfacevisibility: hidden;
    }
    
    .contprospect{ 
        opacity: 0; 
        filter: alpha(opacity=0); 
        height: 100%; 
        position: absolute; 
        width: 100%; 
    
        -webkit-transform-origin: right center; 
        -moz-transform-origin: right center;
        -o-transform-origin: right center; 
        transform-origin: right center; 
    
        -webkittransform: rotatey(50deg); 
        -moz-transform: rotatey(50deg); 
        -o-transform: rotatey(50deg); 
        transform: rotatey(50deg); 
    
        -moz-box-sizing: border-box; 
        box-sizing: border-box; 
    
        -webkit-transition-property: opacity, -webkit-transform, -moz-transform, transform;
        -moztransition-property: opacity, -webkit-transform, -moz-transform, transform;
        -ms-transition-property: opacity, -webkit-transform, -moz-transform, transform;
        -o-transition-property: opacity, -webkit-transform, -moz-transform, transform; 
        transition-property: opacity, -webkit-transform, -moz-transform, transform;
    
        -webkit-transition-duration: 1.2s;
        -moz-transition-duration: 1.2s; 
        -mstransition-duration: 1.2s;
        -o-transition-duration: 1.2s; 
        transition-duration: 1.2s; 
    
        -webkit-transition-timing-function: cubicbezier(0.645, 0.045, 0.355, 1);
        -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -ms-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 
        transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    
    .contprospect.state-in{
        opacity: 1; filter:alpha(opacity=100);
    
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);} 
    
        if ((windowTop >= 0) && (windowTop < offset)) {
            $(".text").stop().css({ "opacity": 1 - (windowTop / 500) });
        }
    }
    

    404 Page

    The animations of the sharks and the unlucky swimmer for the 404 page was achieved with CSS3 features.

    $('.squalo').animate({ opacity: '1' , top:'198px'}, 800, function () { $('.squalo').addClass("onda"); $('.man').addClass("shake"); }); .onda { -webkit-animation: onda 4s ease-in-out infinite alternate; -moz-animation: onda 4s ease-in-out infinite alternate; -ms-animation: onda 4s ease-in-out infinite alternate; -o-animation: onda 4s ease-in-out infinite alternate; animation: onda 4s ease-in-out infinite alternate; } @-webkit-keyframes onda { 0% { -webkit-transform: translateY(0px) translateX(0px);} 60% { -webkit-transform: translateY(-10px) translateX(10px);} 100% {-webkit-transform: translateY(0px) translateX(10px);} } .shake { -webkit-animation: shake 1s ease-in-out infinite alternate; -moz-animation: shake 1s ease-in-out infinite alternate; -ms-animation: shake 1s ease-in-out infinite alternate; -o-animation: shake 1s infinite alternate; animation: shake 0.5s infinite alternate; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);} }

Awwwards

By AQuest

AQuest inspires minds and hearts by transforming the most beautiful dreams into a magical digital experience.

aquest.it

3 4 5 6 7
CLOSE