[B! JavaScript][webdesign] kagioo2umaのブックマーク

これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata

WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ

kagioo2uma 2024/07/23

リンク

Homepage | GSAP

GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.

kagioo2uma 2024/03/12

リンク

Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する

Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。各パネルは、CSS Gridでレイアウト。 positionはなし。ビジュアルのトラン

kagioo2uma 2023/07/26

リンク

View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA

View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる Chrome 126・Edge 126（2024年6月）、Safa

kagioo2uma 2023/05/11

リンク

基礎から学ぶ Vue.js

ローカルストレージを使っているため、保存したデータを他の端末から見ることはできません。 # ファイルを準備しよう使用するファイルは「index.html」「main.js」「main.css」の3つのファイルと、CDN からスタンドアロン版の Vue.js ファイルを読み込みます。 # こちらは完成形 index.html main.js main.css CSS の説明はしていないため、コピペして使用してください。ページレイアウトは次のとおりです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="app">  <

kagioo2uma 2020/07/07

リンク

Vue.jsの基本からよく見かけるUIの実装方法まで、JavaScriptが苦手な人向けに解説した入門書 -Vue.jsの教科書

Vue.jsの基本から、Webページやスマホアプリでよく見かけるUIの実装方法まで、やさしく丁寧に解説した入門書を紹介します。 HTMLとCSSはできるけどJavaScriptはいまいち、Vue.jsってよさそうだけど何から始めればよいか分からない、そんな人にぴったりの一冊です。Vue.jsの解説書にはJavaScriptの基礎知識が前提のものが多いですが、本書は異なります。本書はある程度HTMLとCSSが使用でき、JavaScriptはちょっと苦手という人にお勧めです。特に、Vue.jsに一度挑戦してみたけど、JavaScriptがいまいちの私には無理だった、、、と挫折してしまった人に特にお勧めです。

kagioo2uma 2020/06/19

リンク

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。カルーセルをCSSのみで実装するテクニックのまとめカルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。実装のポイントは、下記の通りです。スライダーの各パネルは、Flexboxで横一列に設定します。パネルを1つだけ表示するにはオーバーフローを使用し、-

kagioo2uma 2020/01/15

リンク

パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc

kagioo2uma 2019/07/24

ええやん！　と思ったけどモバイルChromeでちゃんと動かない感じがする

リンク

スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて

スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。スマホ向けのナビゲーションデザインについての考察を紹介します。 Using Hamburger Menus? Try Sausage Links by Bradley Taunt ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ハンバーガーメニューを使うなら、ソーセージリンクを試してみてハンバーガーメニューとは、長所と短所ソーセージリンクとは、長所と短

kagioo2uma 2019/07/02

リンク

Vue.jsでアホなジェネレーターを作る勉強会をやると予想以上にガチになる

デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え？あのデイリーが？なんでそんな真面目なイベントを？」と驚くかもしれない。急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー）前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く＞個人サイト

kagioo2uma 2019/07/01

リンク

Vue.jsを用いたTodoアプリ - Qiita

<template> <div> <v-toolbar dark color="indigo"> <router-link to="/"> <v-icon>arrow_back</v-icon> </router-link> <v-toolbar-title class="while--text">My Todo</v-toolbar-title> </v-toolbar> <v-text-field v-model="newTodo" placeholder="Input Here..."> </v-text-field> <v-btn dark color="indigo" v-on:click="addTodo()" class="while--text"> ADD </v-btn> </div> </template> <script> export default{ data()

kagioo2uma 2019/06/24

リンク

スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider

ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダーを紹介します。 FullScreen Slider -GitHub FullScreen Sliderのデモ FullScreen Sliderの使い方 FullScreen Sliderのデモデモでは、FullScreen Sliderの快適なスライダーを楽しめます。下記のgifは、左ナビゲーションでクリック操作をしていますが、マウスのホイール操作にも対応しています。

kagioo2uma 2019/04/22

リンク

スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p

kagioo2uma 2019/02/12

リンク

CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。

kagioo2uma 2018/12/13

リンク

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。実装が簡単スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。超軽量 1KBの超軽量ライブラリ。依存は無しスクリプトは単体で動作し、他スクリプトへの依存は一切ありません。ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。

kagioo2uma 2018/09/27

リンク

[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。 basicScrollの特徴他のスクリプトへの依存はゼロ CommonJSとAMDのサポートシンプルなJavaScript API ブ

kagioo2uma 2018/02/21

リンク

[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。シンプルなイベントAPIを備えています。 Macy.jsのデモ実際の動作は、デモページで楽しめます。動作は非常に軽快で、快適です。

kagioo2uma 2017/08/18

リンク

これからは今まで以上に、jQueryが必要なくなるかもしれない

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne