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

[laRus]

Всем привет! 

 

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

 

MicroJS - библиотеки маленьких, но прикольных и полезных, имхо, JS (оч.много всего.. дабы не изобретать велосипед)

http://microjs.com/

 

http://www.140byt.es/

коллекция полезных и максимально сжатых JS

 

http://www.w3schools.com/

Большой справочник с примерами, демками и песочницами для веб-разработчиков

HTML; CSS; JAVASCRIPT; SQL; PHP; jQUERY; BOOTSTRAP; ANGULAR; TUTORIALS; REFERENCES; EXAMPLES.. +color picker

 

П.С. Если не надо - тему можно удалить. А если надо - то добавить ..

[Cheren-dow]

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

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

[laRus]

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

 

Представьте объем работы по переводу ВСЕГО.. жуть.. это можно отдельный проект под это "запилить"

Поэтому, если у кого с инглиш не очень андестенд, то можно ж использовать подручные средства (страницу в браузере перевести, надеюсь, все знают как?!) 

 

Но из уважения и, надеюсь, для пользы дела, могу несколько ссылок с модными и эффектными или просто интересными, имхо, примерами привести, например, из Microjs. Опытные форумчане найдут, я думаю, для себя и другие интересные идеи, помимо перечисленных ниже (мне, например, понравились всякие асинхронные загрузчики, идеи по оптимизации и прочее) Некоторых эффектов можно достичь и др.методами, но тут, помимо результата, нравится маленьких объем исходников (что часто бывает важно, особенно на нагруженных сайтах)

 

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

Well done guys, let's go for it!   Вот некоторые обещанные примеры:

 

https://github.com/w...n/tinyscrollbar- красивый скролл

 

https://github.com/k...ulsen/NanoModal- модальные окошки - http://jsfiddle.net/aKL44/3/

 

https://github.com/t...e/vanilla-modal - модальные окошки - http://phuse.ca/demo...lla-modal/demo/

 

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/

 

http://nv.github.io/...s/textarea.html, http://nv.github.io/placeholder.js/ - placeholder

 

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/- прикольный скрипт для отображения потоковых данных (видела подобное, напр., на крутых музыкальных сайтах, или можно отображать изменение данных "в процессе")

 

https://github.com/daniellmb/VidBG- видео-бэкграунд - http://daniellmb.github.io/AQUA/

 

http://www.soasta.com/- для общего развития, я думаю - нагрузочное тестирование и анализ данных и прочее (кликайте live demo)

http://bajs.io/- 

управление css3 анимацией (крутите стр.ниже, кликайте click me - это просто пример)

 

https://github.com/O...r/guggenheim.js- прикольная галерея с фильтром и тд - http://oinutter.co.uk/guggenheim.js/

 

https://github.com/pbojinov/arrow-js- стрелка, показывающая на расположение загрузки в браузере (к корзине м.прикрутить)

 

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

[laRus]

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

[laRus]

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

[woodman]

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

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

[laRus]

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

[laRus]

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

[isay777]

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# - анимашки 

[laRus]

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

Спасибо 

 

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

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