Сцроллмагиц: забаван веб дизајн

У веб дизајну је тренд сличан стилу који је усвојен за реализацију веб локација који су корисници жестоко прихваћени, обично у привременим периодима. Део досадашњих трендова и, како се чини, наставиће да поставља тон у 2017. години, анимације су и дуге секције са много листа.

Није тајна да је овај стил за кориснике прилично атрактиван и забаван, а помоћу анимација помоћу којих можемо навигацију по сајту учинити интуитивном и забавном док се добро користе. Из тог разлога смо направили туториал за укључивање анимираних скролова на вашу веб локацију користећи јКуери СцроллМагиц додатак.

СцроллМагиц: Забавни веб дизајн

СцроллМагиц је библиотека направљена у ЈаваСцрипту како би се постигле интеракције при премештању веб локација. Потпуно је преправљен од свог претходника Суперсцроллорама и његова архитектура се заснива на додацима који нуде лако прилагођавање и проширивање.

Идеално је ако желимо да реализујемо неке од следећих ствари:

• Анимација заснована на положају или помицању странице. Активирајте анимацију или је синхронизујте са кретањем листа, додајте ефекат паралаксе без већег напора. Креирајте страницу са бесконачним помицањем, обрађујући учитавање садржаја ајаком.

СцроллМагиц карактеристике

• Оптимизоване перформансе, лаган је, флексибилан и омогућава проширивост. Управљање догађајима и програмирање оријентисано на објекте. Подржава адаптивни веб дизајн. Има подршку за кретања у оба смера (хоризонтално и вертикално) Има подршку за кретања унутар контејнера (див), чак и вишеструко на једној страници. Одлично ради за прегледаче: Фирефок 26+, Цхроме 30+, Сафари 5.1+, Опера 10+, ИЕ 9+. У свом спремишту ГитХуб садржи детаљну документацију и много примера примене.

Набавите СцроллМагиц

Доступно је за набавку на различите начине.

1: ГитХуб

гит цлоне гит: //гитхуб.цом/јанпаепке/СцроллМагиц.гит

2: Бовер

бовер инсталл сцроллмагиц

3: менаџер пакета чворова

нпм инсталл сцроллмагиц

4: ЦДН

хттп://цдњс.цлоудфларе.цом/ајак/либс/СцроллМагиц/2.0.5/СцроллМагиц.мин.јс

Такође можете прочитати Како да прилагодите дизајн е-поште у програму Оутлоок

Инсталација и употреба

Инсталација је прилично једноставна, датотеку кернел укључујемо само у хтмл датотеке у којима желимо да је користимо.

;

За употребу, додатак даје образац дизајна оријентисан на контролер, коме се додаје једна или више сцена. Ове сцене се користе за дефинисање шта се дешава у контејнерима када се пређу на одређену тачку.

Ово би био основни пример:

// инит контролер вар цонтроллер = нев СцроллМагиц.Цонтроллер (); // креирајте нову сцену СцроллМагиц.Сцене ({трајање: 100, // сцена би требало да траје током помицања удаљености од 100 пк: 50 // покрените ову сцену након померања за 50пк}).сетПин ("# ми-стицки- елемент ") // прибада елемент током трајања сцене.аддТо (контролер); // додијелите сцену контролору

Напреднији пример би био, постићи више одступања, његов изворни код би био:

$ (фунцтион () {// причекајте документ спреман // инит контролер вар контролер = нови СцроллМагиц.Цонтроллер (); // саставите т између вар твеен = ТвеенМак.то ("# анимате", 0, 5, {скала: 3, једноставност: Линеар.еасеНоне}); // направи сцену вар сцене = нови СцроллМагиц.Сцене ({окидач: "#мултиДирецт", трајање: 400, помак: 250}).сетТвеен (твеен).сетПин ("# анимате"). аддИндицаторс ({наме: "ресизе"}) // додавање индикатора (захтева додатак).аддТо (контролер); // инит контролер хоризонтални вар цонтроллер_х = нови СцроллМагиц.Цонтроллер ({вертикално: лажно}); // изградња између хоризонталних вар твеен_х = ТвеенМак.то ("# анимате", 0, 5, {ротација: 360, једноставност: Линеар.еасеНоне}); // изградити сцену вар сцене_х = нови СцроллМагиц.Сцене ({трајање: 700}).сетТвеен (твеен_х). сетПин ("# анимате").аддИндицаторс ({име: "ротирај"}) // додај индикаторе (захтева додатак).аддТо (контролер_х);});

Много више примера са њиховим изворним кодом можете пронаћи у документацији додатка.

ПРЕПОРУЧУЈЕМО ВАМ како урадити чисту инсталацију Виндовса 10 помоћу УСБ стицка