Перейти к содержимому


Фотография
- - - - -

Библиотечки, демки, песочницы (для начинающих и продолжающих)

справочник песочница примеры

Сообщений в теме: 21

#1 laRus

laRus

Отправлено 27 August 2015 - 20:43

*
Популярное сообщение!

Всем привет! 
 
Сегодня нужно было поразбираться с архивами.. "откопались" интересные вещички.. решила опубликовать, вдруг кому пригодится! скорее всего для начинающих, но, возможно, и "продолжающие" найдут для себя что-нить полезное.
 
MicroJS - библиотеки маленьких, но прикольных и полезных, имхо, JS (оч.много всего.. дабы не изобретать велосипед)
 
коллекция полезных и максимально сжатых JS
 
Большой справочник с примерами, демками и песочницами для веб-разработчиков
HTML; CSS; JAVASCRIPT; SQL; PHP; jQUERY; BOOTSTRAP; ANGULAR; TUTORIALS; REFERENCES; EXAMPLES.. +color picker
 
П.С. Если не надо - тему можно удалить. А если надо - то добавить ..

  • 7
..minimum effort for maximum effect? - Oh yeah! It's good!..

#2 Cheren-dow

Cheren-dow

Отправлено 27 August 2015 - 22:46

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


Сообщение отредактировал Cheren-dow: 27 August 2015 - 22:46

  • 0
Изображение
 

#3 laRus

laRus

Отправлено 28 August 2015 - 12:34

*
Популярное сообщение!

По хорошему еще бы описание для чего тот или иной скрипт

 

Представьте объем работы по переводу ВСЕГО.. жуть.. это можно отдельный проект под это "запилить" :)
Поэтому, если у кого с инглиш не очень андестенд, :) то можно ж использовать подручные средства (страницу в браузере перевести, надеюсь, все знают как?!) 
 
Но из уважения и, надеюсь, для пользы дела, могу несколько ссылок с модными и эффектными или просто интересными, имхо, примерами привести, например, из Microjs. Опытные форумчане найдут, я думаю, для себя и другие интересные идеи, помимо перечисленных ниже (мне, например, понравились всякие асинхронные загрузчики, идеи по оптимизации и прочее) Некоторых эффектов можно достичь и др.методами, но тут, помимо результата, нравится маленьких объем исходников (что часто бывает важно, особенно на нагруженных сайтах)
 
(Общий принцип работы для "новичков", если таковые в тему зайдут: Перейти по ссылке, напр., из Microjs (если надо - перевести страницу браузерными средствами). Если в тексте нет сслыки на "demo", "examples" или еще что, то скачать архив (как работать с github.com известен же всем же?), разархивировать и посмотреть примеры в папке "examples", "test" или что-то в этом роде..)

Well done guys, let's go for it!   :) Вот некоторые обещанные примеры:
 
https://github.com/w...n/tinyscrollbar- красивый скролл
1.PNG
 
 
 
html5tooltipsjs - подсказки c плавной 3D анимацией - http://ytiurin.githu...tml5tooltipsjs/
 
https://github.com/S...rr/imgResize.js- классная штука,особенно если кое-что чуть допилить: можно обрезать фотку прямо на странице сайта до нужного размера (с уменьшением масштаба изображения или нет) и сохранить (экспортировать) - http://simonwaldherr...o/imgResize.js/

https://github.com/krasimir/gifffer- запускать гиф-анимацию ТОЛЬКО по команде пользователя (т.е. отменить авто-запуск гиф-анимации). Очень-очень .. ;) для сайта с документацией jbzoo, например :) В примере - это не видео, это гифки - htp://work.krasimirtsonev.com/git/gifffer/example/
 
http://www.listjs.com/examplesи http://codepen.io/javve/pen/zpuKF - поиск, сортировка,.. в таблице, списке и тд
 
https://github.com/t...ency/swiftclick- устраняет известную проблему с задержкой браузерами около 300 мс между действием касания по экрану сенсорных устройств - обсуждение на Хабре тут http://habrahabr.ru/...ix/blog/227175/
 
 
https://github.com/sbstjn/timesheet.js- события, учет рабочего времени, продвижения проекта и тд
 
https://github.com/m...eish/bespoke.js- забавные переходы страниц - один из примеров (в виде куба) - нажимайте пробел: http://markdalgleish...oke-theme-cube/
 
http://dinbror.dk/blazy/- еще один вариант ленивого загрузчика (крутите стр. вниз)
 
https://github.com/impress/impress.js- впечатляющие ccs3 преобразования и переходы страниц - см. https://github.com/i...mples-and-demos (чуть прокрутите вниз: ссылки на примере в блоке "Presentations"). Напр: http://parhumm.githu...ning-to-design/ (кликайте пробел), http://programma.piratenpartij.be/ (кликайте мышкой по словам) и тд
 
https://github.com/dhilipsiva/style.js- изменение стилей оформления элементов на странице (для повышения юзабилити, например.. на вкус и цвет, как говорится.. :)  ) - http://dhilipsiva.com/style.js/

https://github.com/scottjehl/Respond- адаптирует ВСЕ (любые) объекты на странице в соответствии с размером экрана пользователя - http://alistapart.com/ - выбрать пример из меню ВВЕРХУ и подергать экран
 
http://smoothiecharts.org/- прикольный скрипт для отображения потоковых данных (видела подобное, напр., на крутых музыкальных сайтах, или можно отображать изменение данных "в процессе")
 
 
http://www.soasta.com/- для общего развития, я думаю - нагрузочное тестирование и анализ данных и прочее (кликайте live demo)
управление css3 анимацией (крутите стр.ниже, кликайте click me - это просто пример)
 
https://github.com/O...r/guggenheim.js- прикольная галерея с фильтром и тд - http://oinutter.co.uk/guggenheim.js/
 
https://github.com/pbojinov/arrow-js- стрелка, показывающая на расположение загрузки в браузере (к корзине м.прикрутить)
2.PNG
 

https://github.com/Canop/hu.js- библиотечка для формирования SVG изображения (я думаю, можно попробовать на забитых данными картах, напр., балунов рисовать вместо использования картинок ) - пример ниже на странице (а "нагрузочное тестирование" тут: http://dystroy.org/d...hu.js/demo.html )
 
https://github.com/EvandroLG/selecting- определяет какой текст выделили пользователь на странице - http://evandrolg.github.io/selecting/ (выделите что-нибудь)
 
https://github.com/r...a/microtext.js/- скрипт для обработки текста (примеры см. на странице в блоке "Microtext object functions")
 
https://github.com/joelambert/morf- CSS3 анимации (переходы) с генерацией кода стиля и аппаратным ускорением - http://www.joelambert.co.uk/morf/
 
https://github.com/a...an/simple-async- см. пример - динамическая загрузка изображений разного размера -  http://jsfiddle.net/aravindbaskaran/K63vt/embedded/result/

https://github.com/erf/ImageFlip.js- крошечная библиотечка для слайдшоу
 
https://github.com/e...singer/imago.js- поиграйте с демо (http://evandroeisinger.github.io/imago.js/example/), сами придумаете, как использовать, если понравится ;)
 
http://www.storminth...rojects/goo.js/- легкий HTML5 Canvas API для упрощения обработки событий и графики - http://www.storminth...les/events.html (двигайте мышулю, кликайте, etc.), http://www.storminth...ullscreen.html, http://www.storminth...animation.html, http://www.storminth...ples/racer.html (клавиши управления курсором: вверх - поехали; вправо-влево)
 
https://github.com/M...utubeDelayed.js- полезная вещь, если на странице много видео (youtube player будет загружен только тогда, когда пользователь захочет это видео посмотреть) - http://mad-gooze.git...utubeDelayed.js
 
https://github.com/rgrove/lazyload- ленивая загрузка для css и js ("проект больше не поддерживается.. хотите больше? Не стесняйтесь раскошелиться" (с) Хааааааааа!! Смешно написал..)
 
https://github.com/s...en/ifvisible.js- библиотечка, которая следит, делает ли пользователь что-то на странице (может видели на некоторых сайтах, например, котяру, который засыпает через некоторое время нашего бездействия? Оооочень прикольно :) все девчонки тащатся! Факт! :) ) - простой пример http://serkanyersen....le.js/demo.html (зайдите и ничего не делайте.. потом кликните)
 
 
 
 
Добавление из соседней темы: Задать форму для поля ввода

Сообщение отредактировал Ursa: 28 August 2015 - 15:55

  • 9
..minimum effort for maximum effect? - Oh yeah! It's good!..

#4 laRus

laRus

Отправлено 28 August 2015 - 12:38

Ну вот.. как-то так,  в общем..  :)


  • 2
..minimum effort for maximum effect? - Oh yeah! It's good!..

#5 laRus

laRus

Отправлено 28 August 2015 - 15:48

+ из соседней темы: Задать форму для поля ввода


  • 1
..minimum effort for maximum effect? - Oh yeah! It's good!..

#6 woodman

woodman

Отправлено 28 August 2015 - 15:49

+ из соседней темы: Задать форму для поля ввода

 отредактируй первое сообщение (добавь это туда), чтоб потом не искать по ветке


  • 0

#7 laRus

laRus

Отправлено 28 August 2015 - 15:53

Ладно, щас сделаю..  


  • 0
..minimum effort for maximum effect? - Oh yeah! It's good!..

#8 laRus

laRus

Отправлено 28 August 2015 - 16:02

ПС... а вообще-то, наверняка у кого-нибудь еще такие "складики" есть.. Может поделитесь?  (mmmm) 


  • 0
..minimum effort for maximum effect? - Oh yeah! It's good!..

#9 isay777

isay777

Отправлено 28 August 2015 - 20:12

*
Популярное сообщение!

http://semantic-ui.com/- симпатишный фреймфорк

 

http://tympanus.net/codrops/- склад всего хорошего 

 

http://codyhouse.co/- склад много всего 

 

http://tutorialzine....jquery/page/10/- склад скриптов и статьи 

 

http://snapsvg.io/ работас svg

 

http://kenwheeler.github.io/slick/- слайдер js

 

https://ianlunn.github.io/Hover/библиотека ховер эффектов

 

http://elrumordelalu...hub.io/csshake/- попатряс 

 

http://briangonzalez...backgrounds.js/- адаптивный фон 

 

http://stickyjs.com/- знаменитый стики 

 

http://h5bp.github.io/Effeckt.css/- огромная бибилиотека эффектов все в одном

 

http://stephanwagner.me/jBoxнотайсы и тултипы 

 

http://demo.tutorial...-effect-jquery/- оживляем текст 

 

http://fronteed.com/...ck/#skin-squareчекбоксы и радио 

 

http://www.clicktore...e/css3dclouds/#облака на css 

 

http://www.justinagu...ons/index.html# - анимашки 


  • 7
ХОСТИНГ для сайтов jbzoo (все попугаи)

#10 laRus

laRus

Отправлено 28 August 2015 - 20:38

isay777, .. ну, что сказать.. нет слов  8)  (в скобках: :-* ) Пааааашла изучать  :)) 

Спасибо  :)

 

P.S. можно не я буду переводить? пожаааалуйста!  :)


Сообщение отредактировал Ursa: 28 August 2015 - 20:43

  • 1
..minimum effort for maximum effect? - Oh yeah! It's good!..





Темы с аналогичным тегами справочник, песочница, примеры

Click to return to top of page in style!