Brusher - Create Interactive Backgrounds for Webpages
brusher A lightweight library to create interactive backgrounds Star Background of this page has been auto created by brusher. Move your mouse around to see it in action. All you need is an image. Below code shows how the current page has been initialized const brusher = new Brusher({ image: 'abstract.png' }); brusher.init(); There are several options that you can use to modify the result. Have a
Blotter.js
Production Version Minified, 402kb Development Version Uncompressed, 752kb Overview When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke so
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
ScrollMe - For simple scrolling effects
ScrollMe A jQuery plugin for adding simple scrolling effects to web pages ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It's easy to set up and not a single line of javascript is required. Why just these properties? Because browsers can animate them quic
[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch -GitHub pageSwitchのデモ pageSwitchの使い方 pageSwitchのデモ pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。 下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
![[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch](https://cdn-ak-scissors.b.st-hatena.com/image/square/fec6bf67d7730443566e7451a2e74cd7133ab866/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012501.png)
underlinejs.org
We’re getting things ready Loading your experience… This won’t take long.
☆ sweep.js ☆
Status This project is no longer maintained. CSS now has built-in support for setting color-interpolation-method. Transitioning through the oklch color space is a superior alternative to using this library. About sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions and existing frameworks convert HSL col
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
shine.js
var shine = new Shine(document.getElementById('my-shine-object')); window.addEventListener('mousemove', function(event) { shine.light.position.x = event.clientX; shine.light.position.y = event.clientY; shine.draw(); }, false); FeaturesDynamic light positionsCustomizable shadowsNo library dependencies, AMD compatibleUses text or box shadows based on contentWorks in browsers that support textShadow
カーテン、というかシャッター？みたいにページが切り替わるJS
コンテンツのタイトルをここにいれる このページが長い場合はここだけスクロールしてから、 次のコンテンツにいきます。 images なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。 images なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの
25 free, scrolling plugins for awesome experiences
[“ The art of creating a website these days is learning how to create an online experience. Many of these experiences are extensions of a brand or person and are relayed via different colors, fonts, etc. Thanks to awesome advancements in technologies, we can do a lot of stuff with our websites that we couldn’t do a few years ago. We are taking the experience from dry and drab to fun and fab.<\/p>\
Flipload JS Component
Flipload.js Flipping HTML elements to show a loading indicator easily. Example 1 Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis partur
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mikefowler/crossfade.js: A tiny (~3kb) jQuery plugin for crossfading images as you scroll down a page.
css-filter.js
NProgress: slim progress bars in JavaScript
Webcam Swiper
GitHub - iambrandonn/WebcamSwiper: An experiment to control a photo carousel using getUserMedia to watch for swipes left and right with a hand.
GitHub - GianlucaGuarini/Vague.js: Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters
http://oridomi.com/