идентификация библиотеки анимации jquery - PullRequest
0 голосов
/ 06 февраля 2012

Может ли кто-нибудь подсказать мне, какая библиотека jquery используется на этом веб-сайте, http://www.bluemountains.edu.au/,, и если она доступна для скачивания или доступна для покупки через Интернет? Я говорю о влиянии на студенческую жизнь, меню программ и карьеры на главном баннере.

Заранее спасибо.

Ответы [ 4 ]

0 голосов
/ 06 февраля 2012

Перекос выполняется css3 и html 5 и анимацией с использованием jquery (в ie7 нет эффекта перекоса):

#homepage_accordion a {
    position: relative;
    margin: 0 0 0 -1px;
    display: block;
    float: left;
    height: 500px;
    overflow: hidden;
    text-decoration: none;
    -moz-transform: skew(-2deg, 0deg);
    -webkit-transform: skew(-2deg, 0deg);
    -o-transform: skew(-2deg, 0deg);
    -ms-transform: skew(-2deg, 0deg);
    transform: skew(-2deg, 0deg);
}

и сценарий

    // Let's grab all of the actors in this feature
    var $FL = jQuery('#homepage_accordion a.left');
    $FL.data({
      'wrap': $FL.find('.wrap'),
      'excerpt': $FL.find('.excerpt')
    });

    var $FM = jQuery('#homepage_accordion a.middle');
    $FM.data({
      'wrap': $FM.find('.wrap'),
      'excerpt': $FM.find('.excerpt')
    });

    var $FR = jQuery('#homepage_accordion a.right');
    $FR.data({
      'wrap': $FR.find('.wrap'),
      'excerpt': $FR.find('.excerpt')
    });


    // Set some animation options
    var animOpts = {
      duration: 600,
      queue: false,
      easing: 'easeInOutQuart'
    };


  // Now we'll add the events for each
    $FL.bind('mouseenter', function(Event) {
        $FL.data('wrap').animate({
            marginTop: 350,
            height: 150
        }, animOpts);

        $FL.data('excerpt').animate({
            opacity: 1
        }, animOpts);

        $FM.animate({
            marginLeft: 0
        }, animOpts);

        $FM.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 300
        }, animOpts);

        $FM.data('excerpt').animate({
            opacity: 0
        }, animOpts);

        $FR.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 2000
        }, animOpts);

        $FR.data('excerpt').animate({
            opacity: 0
        }, animOpts);
    });

    $FM.bind('mouseenter', function(Event) {
        $FM.data('wrap').animate({
            marginTop: 350,
            height: 150,
            width: 600
        }, animOpts);

        $FM.animate({
            marginLeft: -250
        }, animOpts);

        $FM.data('excerpt').animate({
            opacity: 1
        }, animOpts);

        $FL.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 2000
        }, animOpts);

        $FL.data('excerpt').animate({
            opacity: 0
        }, animOpts);

        $FR.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 2000
        }, animOpts);

        $FR.data('excerpt').animate({
            opacity: 0
        }, animOpts);
    });

    $FR.bind('mouseenter', function(Event) {
        $FR.data('wrap').animate({
            marginTop: 350,
            height: 150
        }, animOpts);

        $FR.data('excerpt').animate({
            opacity: 1
        }, animOpts);

        $FM.animate({
            marginLeft: -250
        }, animOpts);

        $FM.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 300
        }, animOpts);

        $FM.data('excerpt').animate({
            opacity: 0
        }, animOpts);

        $FL.data('wrap').animate({
            marginTop: 0,
            height: 500,
            width: 2000
        }, animOpts);

        $FL.data('excerpt').animate({
            opacity: 0
        }, animOpts);
    });
0 голосов
/ 06 февраля 2012
0 голосов
/ 06 февраля 2012

Если вы говорите об основном эффекте аккордеона для баннера, когда вы наводите курсор мыши на разные заголовки, он, кажется, сделан на заказ автором.

Вы можете сканировать источник и найти код, который они использовали, но это может быть не то, что вы ищете здесь.Вероятно, у вас должен быть кто-то с опытом работы с jQuery, который запрограммирует вас на то, что подходит вашему проекту, это довольно простая задача с нуля.

0 голосов
/ 06 февраля 2012
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...