CSS

[jQuery]手軽に実装する上に戻るボタン。最初は非表示である程度スクロールすると表示される機能付き。

2018年1月31日
$(document).ready(function(){ $(window).scroll(function() { if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示 $(".back-to-top").fadeIn(); } else { $(".back-to-top").fadeOut(); } }); $(".back-to-top").click(function() { $("body,html").animate({scrollTop:0},800); // 800msかけて上に戻る });});
CSS

[Bootstrap]ナビゲーションをAffixさせる際にスライドインする処理

2017年12月12日
<div class="navbar" data-spy="affix" data-offset-top="60"> Header Navigation</div><div class="empty-field"></div>.navbar { background: #000; color: #fff; padding: 15px 0; text-align: center;}.navbar.affix-top { position: static; top: -120px;}.navbar.affix { position: fixed; top: 0px; width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 0.95;}body { /* Affixをわかりやすくするためにグラデーションつける */ background-color: #F07575; /* fallback color if gradients are not supported */ background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */}.empty-field { height: 1000px;}
JavaScript

three.jsで立方体を回転させる

2017年8月28日
(function(){ 'use strict'; var scene; var object_cube; var light_ambient , light_direction; var camera; var renderer; var width = 600; // 全画面にしたい場合：window.innerWidth; var height = 400; // 全画面にしたい場合：window.innerHeight; init(); animate(); function init() { // scene --------------------------------------------------- // シーンに対してオブジェクト、ライト、カメラを配置する。 scene = new THREE.Scene(); // scene.fog : 霧効果・・・奥に行くほど霧がかって映る // scene.fog = new THREE.Fog(0x990000, 1000,2000); // object ----------------------------------------------- // THREE.Mesh ： ポリゴンメッシュオブジェクトを生成 // new THREE.Mesh(Geometry：形,Material：素材) object_cube = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), // new THREE.MeshLambertMaterial({color: 0x00a0e8}) ); object_cube.position.set(0,0,0); scene.add(object_cube); // light ----------------------------------------------- // 環境光 ************ // THREE.AmbientLight ： 環境光・・・オブジェクトの全ての面を均等に照らすライト。影が出来ない。 // new THREE.AmbientLight(光の色,光の強さ[省略可]) light_ambient = new THREE.AmbientLight( 0xffffff , 1 ); scene.add(light_ambient); // 平行光源 ************ // THREE.DirectionalLight ： 平行光源・・・特定の方向へのライト。影が出来る。 // new THREE.DirectionalLight(光の色,光の強さ[省略可]) light_direction = new THREE.DirectionalLight( 0xffffff, 1 ); // DirectionalLightの位置 light_direction.position.set( 50, 10, 5); // DirectionalLightの対象オブジェクト light_direction.target = object_cube; scene.add(light_direction); // camera -------------------------------------------------- camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200,100,300); camera.lookAt(scene.position); // renderer ------------------------------------------------ renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width,height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById("stage").appendChild(renderer.domElement); renderer.render(scene, camera); } function animate() { // window.requestAnimationFrame:再描画のタイミングで指定した関数が呼び出される // https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame requestAnimationFrame( animate ); render(); } function render() { object_cube.rotation.x += 0.01; // x軸方向に回転 object_cube.rotation.y += 0.01; // y軸方向に回転 object_cube.rotation.z += 0.01; // z軸方向に回転 console.log("object_cube.rotation : " , object_cube.rotation); // 再描画 renderer.render(scene, camera); }})();
JavaScript

three.jsで立方体を表示する

2017年8月28日
(function(){ 'use strict'; var scene; var object_cube; var light_ambient , light_direction; var camera; var renderer; var width = 600; // 全画面にしたい場合：window.innerWidth; var height = 400; // 全画面にしたい場合：window.innerHeight; init(); function init() { // scene --------------------------------------------------- // シーンに対してオブジェクト、ライト、カメラを配置する。 scene = new THREE.Scene(); // scene.fog : 霧効果・・・奥に行くほど霧がかって映る // scene.fog = new THREE.Fog(0x990000, 1000,2000); // object ----------------------------------------------- // THREE.Mesh ： ポリゴンメッシュオブジェクトを生成 // new THREE.Mesh(Geometry：形,Material：素材) object_cube = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), // new THREE.MeshLambertMaterial({color: 0x00a0e8}) ); object_cube.position.set(0,0,0); scene.add(object_cube); // light ----------------------------------------------- // 環境光 ************ // THREE.AmbientLight ： 環境光・・・オブジェクトの全ての面を均等に照らすライト。影が出来ない。 // new THREE.AmbientLight(光の色,光の強さ[省略可]) light_ambient = new THREE.AmbientLight( 0xffffff , 1 ); scene.add(light_ambient); // 平行光源 ************ // THREE.DirectionalLight ： 平行光源・・・特定の方向へのライト。影が出来る。 // new THREE.DirectionalLight(光の色,光の強さ[省略可]) light_direction = new THREE.DirectionalLight( 0xffffff, 1 ); // DirectionalLightの位置 light_direction.position.set( 50, 10, 5); // DirectionalLightの対象オブジェクト light_direction.target = object_cube; scene.add(light_direction); // camera -------------------------------------------------- camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200,100,300); camera.lookAt(scene.position); // renderer ------------------------------------------------ renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width,height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById("stage").appendChild(renderer.domElement); renderer.render(scene, camera); }})();
HTML

Foundation Height Adjust

2017年8月25日
<div class="grid-x" data-equalize-on="medium" data-equalizer="foo"> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true"> <h3>Parent panel</h3> <div class="callout" data-equalizer-watch="bar"> <p>The three callouts in this panel will equalize, even when stacked.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> </div> <div class="medium-4 columns"> <div class="callout panel" data-equalizer-watch="foo"> <p>Where these panels will not equalize on stack, and instead equalize on medium up.</p> </div> </div> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div></div>