Анимирани лента за навигация
В този урок ще ви покажа как да направите анимиран лентата за навигация на вашия сайт. Този панел ще бъдат номинирани, когато мишката витае над малка видима част в същото време да се променя неговият цвят на фона и плъзнете назад, когато ви отведе далеч от това на показалеца на мишката. И това ще бъде прибран от "скача" анимиран ефект. И най-важното - ще научите за приставки, с които да се направи такъв панел е много проста.
Днес, аз ще ви покажа как да се направи нов панел с по-сложна и интересна анимация. И вие ще научите за две плъгини JQuery, които ще създадат анимацията с лекота. Мисля, че ще намерите използването на такава анимиран панел на страниците на вашия сайт или блог.
Вижте например в действие можете, като кликнете върху иконата "Demo" в началото на урока, и изтегляне на всички изходни файлове, можете да, като кликнете върху иконата "източници".
Сега, нека да започнем!
1. За да започнете, ще се създаде проста HTML страница. Тази страница между маркерите ние ще се свърже главата маса файла с «animate_style.css» стила, който ще се създаде по-късно. същото се HTML-файл, аз ще запази името «animate.html».
В тази страница ще бъде водещ на DIV с нашата лента за навигация. В примера използвам като отправна точка за моя образ панел. Аз вече им беше изготвен в Photoshop. Изображенията трябва да са с еднакъв размер (в моя пример, те са 70 от 70 пиксела). Можете да ги намерите в изходни материали в «образ» папка или се подготвят и използват своя образ, също ги поставя в папка с «имидж» име.
Курсора на мишката върху лентата на левия ръб на страницата
Ако се вгледаме в нашата страница в браузъра, след това в този момент, че ще изглежда така:
2. Нека сега да създадете файл стилове «animate_style.css» име, поставете го в същата директория като HTML-файл (ако ще поставяте стил лист файл в отделна папка, не забравяйте да промените пътя до него в html- файл).
Сега ние предпише някои стилове в нашия уеб страница, за да изглежда по-красива, и да се подготвят нашите чекмедже за анимация.
Следния код стилове за елементи на страницата можете да видите правилата на подреждане на елементи и да им даде определен стил. Аз също украсени етикетите и някои блокове на сенки (на създаването на сенките могат да бъдат прочетени тук с помощта на CSS3).
Но най-големият ви обърна внимание, стил върху елемент с ID «таблото на задачите». защото тези стилове, скрий ни капак картина, оставяйки само на ръба на полезрението ни.
Така че, кодът за файла със стил лист:
Ако отворим нашия уеб браузър, ще видите, че за да приложите стил, с изображения на панела е скрита, и ние виждаме само ръба.
Препарати завършени. Първи програмиране.
Но на всички, нека да е в ред.
На първо място, свържете библиотека JQuery и плъгини. Тези файлове могат да бъдат намерени в изходния код на урок по «JS» папка. Създаване на добре в своя каталог, който е HTML-файл папка, «JS» и копиране на файлове към него: «JQuery-1.6.3.min.js», «jquery.easing.1.3.js» и «jquery.color. JS ».
Сега, между маркерите глава HTML-файл, веднага след стилов връзка свържем тези три файла:
И сега, само след свързването на трите файлове (с библиотека и плъгини), се свържете с HTML-страницата, и този файл.
4. Отидете на «animate.js» файл и започнете да пишете в нашия код.
Започваме написването на кода ни със следните редове:
Сега трябва да изберете елемент, който е отговорен за чекмеджето. Тази позиция има име «табло». Елемент мотаем функция «задържане на курсора ()», която използва като параметри две анонимни функции. Един от тях ще бъде отговорен за действията, когато ние се движат курсора на мишката до ръба на панела; а другият - за действията, когато сме премахване на показалеца.
$ (Документ) .ready (функция ()<$('#dashboard').hover( function()<>, функция ()<> ); // край на функцията на висене ()>); // край на готови (функцията)
Засега функцията не прави нищо, защото нейните параметри (анонимни функции) не съдържат никакви команди - те са празни. Нека да поправя това.
Първи стъпки, за да предписват ситуация, в която курсора на мишката е върху лентата за навигация. Ще използваме «живата ()», заедно с индекса «този» ( «този» се отнася до елемент на страницата, която е прикрепена към събитието - в този случай, за да блокира навигационна лента).
Функцията ще дадем три аргумента: първият - константа обект, който ще се променя местоположението на единица спрямо левия ръб (и просто, натиснете панела) и промяна на цвета на самия панел (това е възможно с помощта на приставката свързан по-рано); второ - да се създаде анимация време (500 милисекунди); трето - определя вида на анимация «easeInSine» (използване на тази анимация е възможно благодарение на щепсела на връзка).
Ако сега се опресни страницата в браузъра и да се премести курсора на мишката до ръба на панела, можете да видите как се представи гладко, промяна на цвета си.
Вече добре! Необходимо е обаче, че панелът също се мести, когато ние, като с него курсора на мишката. За да направите това, трябва да се регистрирате на екипа за втори анонимен функция.
Точно както ние сме предписано разширение кодекс панел, ние предписва кода, така че да се върне назад, но тук ние използваме ефекта на "скача" (като че ли най-zadvizhenii навигационна лента удря на ръбовете, отскача и след това напълно прибран), увеличение анимацията и да се върне на цвета и разположението на панела в първоначалното му състояние.
Сега всичко, много хубава работа. Можете да проверите вашия браузър. Имаше един малък проблем: ако започнете да карам бързо с мишката напред и назад, режисура и да ги отклонят към панела, а след това застана и да откриете, че за известно време, панелът ще бъде преместен вътре и вън без вашите действия. Тя идва от факта, че анимация ефект се нарежда на опашка и множествена курсора на мишката създава един дълъг списък от ефекти.
За да се промени това положение, е необходимо между «този» и «анимирате» регистрирате функция «стоп ()». Това ще реши проблема.
По този начин, окончателният вариант на кодекса ще бъде, както следва:
Точно така, само на 24 реда код (ще бъдат по-малко, ако не пиша всеки цитат на нов ред) и имате ефектна анимационен панел.
Мисля, вие със сигурност ще намерите използването на такива панели на вашия сайт.
Е, това е най-вероятно всички. Желая ти късмет приятели и повече творчески идеи!
Свързани статии