Создаем заставку на сайт в стиле Apple

Демо: смотреть

Вы, вероятно, видели удивительный заставку, что Apple использует для содействия событий. Рискуя начать тенденцию, в этом уроке мы будем создавать при помощи JQuery плагина, фантазию apple. Заставка для сайта это модно. Можно поприветствовать пользователя или сообщить ему что-то новенькое.

Как всегда мы начнем с HTML разметки.

HTML
index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Splash Screen | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/splashscreen.css" />

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js">
</script>
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script.js"></script>

</head>
<body>

<div id="page">
    <div id="topBar"></div>

    <div id="promoIMG">
        <img src="img/available_now.png" alt="Available Now" />
    </div>

    <div id="contentArea">
        <p>... The textual content ...</p>
    </div>
</div>

</body>
</html>

Обратите внимание, что я поставил скрипты в голову сайта ( между тегами head). Одна правельно было бы их включить в содержание, но на этот раз нам нельзя нечего показывать пока не пройдет заставка. Поэтому подключать нужно именно между тегами head.

Код заставки содержится в jquery.splashscreen.js, который мы будем обсуждать в последнем разделе.

CSS
У нас есть два различных файла стилей - styles.css и splashscreen.css. Первый очень прост, он используется только в стиле основной страницы, и не представляет никакого интереса для нас, и не будет обсуждаться здесь. Стили, которые определяют внешний вид заставки находятся в файле - splashcreen.css, которые вы можете увидеть ниже.

splashscreen.css

#splashScreen img{
    margin:0 auto;
}

#splashScreen{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#252525;
    background-repeat:no-repeat;
    text-align:center;
}

JQuery
Весь код плагина находится в jquery.splashscreen.js. Как я уже говорил в первой части урока, важно, что бы скрипт был загружен до содержания , в противном случае пользователи будут свидетелями несколько неприятных дрожаний заставки.

jquery.splashscreen.js

// A self-executing anonymous function,
// standard technique for developing jQuery plugins.

(function($){

    $.fn.splashScreen = function(settings){

        // Providing default options:

        settings = $.extend({
            textLayers        : [],
            textShowTime    : 1500,
            textTopOffset    : 80
        },settings);

        var promoIMG = this;

        // Creating the splashScreen div.
        // The rest of the styling is in splashscreen.css

        var splashScreen = $('<div>',{
            id    : 'splashScreen',
            css:{
                backgroundImage        : promoIMG.css('backgroundImage'),
                backgroundPosition    : 'center '+promoIMG.offset().top+'px',
                height                : $(document).height()
            }
        });

        $('body').append(splashScreen);

        splashScreen.click(function(){
            splashScreen.fadeOut('slow');
        });

        // Binding a custom event for changing the current visible text according
        // to the contents of the textLayers array (passed as a parameter)

        splashScreen.bind('changeText',function(e,newID){

            // If the image that we want to show is
            // within the boundaries of the array:

            if(settings.textLayers[newID]){
                showText(newID);
            }
            else {
                splashScreen.click();
            }
        });    

        splashScreen.trigger('changeText',0);

        // Extracting the functionality into a
        // separate function for convenience.

        function showText(id){
            var text = $('<img>',{
                src:settings.textLayers[id],
                css: {
                    marginTop : promoIMG.offset().top+settings.textTopOffset
                }
            }).hide();

            text.load(function(){
                text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){
                    text.remove();
                    splashScreen.trigger('changeText',[id+1]);
                });
            });

            splashScreen.append(text);
        }

        return this;
    }

})(jQuery);

script.js
В этот файл будут прописаны изображения которые будут меняться. Например изображения приветствия.

$(document).ready(function(){

    // Calling our splashScreen plugin and
    // passing an array with images to be shown

    $('#promoIMG').splashScreen({
        textLayers : [
            'img/thinner.png',
            'img/more_elegant.png',
            'img/our_new.png'
        ]
    });

});

Общетематический форум.: Создаем заставку на сайт в стиле Apple - Общетематический форум.

Toggle shoutbox