Как създадох анимиран магазин за книги с JavaScript, jQuery и CSS.

За да добиете добра представа за това как работи flex опитайте редактора за оформление на flex на тази страница.

Последните два от уроците ми се занимаваха с CSS grid и flex. Написах ги, за да мога да науча какви са възможностите и да споделя своите открития с други. Използвайки grid, flex, jquery и 5 часа от времето си, създадох това.

Анимация, която създадох за заглавката на сайта на книжарница „Крива на обучение“. Разбира се, това не прилича на решетка. Но това е творческо и забавно IMO

Тук поредица от прости техники дават някак драматичен ефект.

Винаги казвам това:

  • Не е нужно да знаете всичко за даден език.
  • Трябва само да знаете няколко абстрактни техники. Но ги познавай добре.
  • Разберете каква е предназначението на тази техника.

Нека разбием дизайна на отделни елементи:

Същата анимация с изображения на книги, премахнати чрез img {видимост: скрит} и рамка, добавена към всички елементи * {граница: 1px плътно сиво; }

Намерих този безплатен клипарт с мотор, като извърших бързо търсене в Google Images. Разделих го на две отделни изображения и добавих прозрачност. Извадих също колелото и го анимирах отделно с по-малък z-индекс зад рамката.

Ключовите елементи на дизайна тук са:

  • Използвах flex за контейнери за книги, за да ги подравня („float“) към дъното.
  • Подвижната част на мотора е анимирана с помощта на анимационната функция на jQuery: $ ("# bike-back"). Animate ({width: bike_position_x});
  • Колелото се завърти с помощта на $ ("# колело"). Css ({преобразуване: "завъртане (" + колело_степен + "градус)"};

Използвайки тези три идеи, можете да създадете толкова много различни ефекти. В уеб дизайна повечето анимация, която ще правите, е или да движите обект в 2 измерения или да го завъртите. Много като 2D видео игри.

Програмен код

Не искам да претрупвам четивостта на този урок с HTML и CSS изходен код. Но ето JavaScript, който прави анимациите:

<Скрипт>
    / * Стартови параметри, ъгъл на колелото и т.н. * /
    нека ъгъл = 100; // ъгъл на завъртане на началното колело
    нека bx = 600 + 0; // начално положение на колелото
    нека wx = 600 + 50; // начална позиция на рамката на мотора
    нека T = null; // обект на таймера за анимация
/ * Всички ресурси са заредени, сега какво? * /
    window.onload = () => {
/ * Анимирайте мотора и колелото * /
        T = setInterval (() => {
$ ( "# Колело"). CSS ({
                трансформация: 'завъртане (' + ъгъл + 'градус)',
                вляво: wx + 'px'}, 0);
/ * Преместете рамката на мотора * /
            $ ("# bicycle-end"). css ({вляво: bx + 'px'}, 0);
/ * броячи на прогреса * /
            angle--; // завъртете колелото на -1 градус
            bx--; // преместете мотора с -1px
            wx--; // преместете колелото с -1px
/ * моторът стигна до края, на анимация, нулиране брояч * /
             ако (bx <= 249) {
                clearInterval (Т);
                T = нула;
            }
}, 5); // забавяне на анимацията в милисекунди
    }

Да, това е JavaScript. Но това е просто и няма претрупване на свойствата на CSS.

Можете да направите това с помощта на CSS анимации. Няма значение. Харесва ми подхода на JavaScript, защото той ми дава по-добър контрол върху броячите на анимации. Не е нужно да претрупвам кода си с разширения за moz- и webkit.

Пропуснах изходния код на CSS и HTML, но все пак можете да го потърсите от уебсайта на кривата на обучение. Това е уебсайтът, за който проектирах тази анимация.

И докато сме на темата ...

След като получите анимацията си полирана, е лесно да разменяте съдържание наоколо, за да видите какво би било като с различни изображения.

Това е просто евтин начин да умножите стойността на работата си. Ако не друго, използвах го като публикация в Twitter, която изглеждаше някак различно от велосипеда.

Но може би това резонира с водачите на Beetle? Заслужава изстрел.

Нищо не се е променило, освен размера и положението на колелото. Но това бяха лесни ощипвания, след като кодът беше написан.

На следващия ден ...

Продължих работа на книжарницата на следващия ден. Трябваше дълго време да създавам страница с продукти за книгите си. След няколко часа дойдох с тази идея:

Оформлението на страницата с книжните продукти е създадено с помощта на CSS решетка за основно скеле и гъвкава вътре за списъка с визуализации на книги.

Точка взета. Използвайте CSS решетка за основния скелет. Използвайте flex като вътрешни клетки или неговото съдържание.

jQuery изображение с мащабиране с мащабиране на изображението е приложен към всеки flex елемент> img:

/ * с мишката над * /
$ (". more-content div img"). on ("мишката", функция () {
    $ (this) .stop (). анимация ({top: "-18px", отляво: "-18px", ширина: "120%"}, 300, "люлка");
});
/ * при излизане с мишката * /
$ (". more-content div img"). on ("mouseout", function () {
    $ (this) .stop (). анимация ({top: "0px", отляво: "0px", ширина: "100%"}, 300, "люлка");

Не знам в колко проекта използвах тази техника! Анимационните елементи са забавни и jQuery със сигурност го прави доста лесно (и крос-браузър.)

Welp, изглежда интерактивно и забавно. И това е много по-добре от статичните дизайни. Анимациите помагат за създаването на ангажиращо потребителско изживяване.

Потребителите на сигнали са по-склонни да купят вашия продукт ... въпреки това не се заблуждавайте ... това е вярно само ако можете да поддържате интереса си с полезни и висококачествени продукти.

Заключителни мисли

  • Не се страхувайте да експериментирате с уникални идеи. Намирам, че когато мисля за себе си, произвеждам възможно най-добрия дизайн. Трябва да намеря някак си онази увереност, че мога да го направя.
  • jQuery не е изчезнал. Той е полезен, не като заместител на Vue, React или Angular, но когато се използва по предназначение. Той е чудесен за анимация между браузъри (по-специално да се движи и завърта).
  • Използвайте комбинация от налични ресурси (JavaScript, jQuery, CSS, клипарт)

Следвайте ме в социалните мрежи за още Freemium уроци!

Можете да ме следите в Twitter за случайни раздавания на PDF през уикенда.

Следвайте ме в Instagram за бърз хит на JavaScript.

Можете да ме последвате във Facebook за безплатни кодиращи неща.

Оферта за определено време

Диаграмите в този урок бяха повлияни директно от ръкописа!

CSS Visual Dictionary 28% OFF за средни четци.

28% отстъпка

Само средни читатели:

CSS Visual Dictionary

== вземете копие ==

Съдържа всички CSS свойства.