Skip to content

Instantly share code, notes, and snippets.

View friedrith's full-sized avatar
💻
Available for jobs

Thibault Friedrich friedrith

💻
Available for jobs
42 followers · 2 following
View GitHub Profile
@friedrith
friedrith / entity.js 2
Created May 7, 2018 14:18
<a-entity camera look-controls>
<!-- bottom left and bottom right -->
<a-entity geometry="primitive: plane; height: 0.3; width: 0.5" rotation="0 -20 0" position="0.5 -0.7 -1"
material="color: gray; opacity: 0.5"></a-entity>
<a-entity geometry="primitive: plane; height: 0.3; width: 0.5" rotation="0 20 0" position="-0.5 -0.7 -1"
material="color: gray; opacity: 0.5"></a-entity>
<!-- top left and top right -->
<a-entity geometry="primitive: plane; height: 0.3; width: 0.5" rotation="0 20 0" position="-0.5 0.7 -1"
material="color: gray; opacity: 0.5"></a-entity>
@friedrith
friedrith / entity.js
Created March 28, 2018 20:41
<a-entity camera look-controls>
<!-- your next entities -->
</a-entity>
@friedrith
friedrith / script VR mode button.js
Last active March 28, 2018 20:28
<script>
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
@friedrith
friedrith / index.html
Created March 28, 2018 19:54
A-Frame
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 -1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 -1 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1.5 -0.75 -3.5" radius="0.5" height="2.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 -4 -4" rotation="-90 0 0" width="4000" height="4000" color="#7BC8A4"></a-plane>
@friedrith
friedrith / style.scss
Last active December 13, 2017 22:00
@import "colors";
@import "fonts";
.main, .conclusion {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@friedrith
friedrith / index.js
Last active December 13, 2017 21:53
import 'normalize.css' // to clear all exotic browser style
import './style/style.scss'
@friedrith
friedrith / index.html
Created December 13, 2017 21:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animated light effect</title>
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet"> <!-- for the h1 title -->
</head>
<body>
<div class="main" id="main"> <!-- where you will put the custom animation -->
</div>
@friedrith
friedrith / index.js
Created December 13, 2017 21:11
if (document.getElementById('main')) {
// init controller
var controller = new ScrollMagic.Controller();
// create a scene
new ScrollMagic.Scene({
duration: 3000, // the scene should last for a scroll distance of 100px
offset: 0, // start this scene after scrolling 0px
})
.setPin("#main") // pins the element for the the scene's duration
@friedrith
friedrith / style.scss
Last active December 13, 2017 07:12
@import "colors";
@import "fonts";
@mixin linearGradient($angle, $colorBegin, $colorEnd) {
background: $colorBegin; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($angle, $colorBegin, $colorEnd); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($angle, $colorBegin, $colorEnd); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($angle, $colorBegin, $colorEnd); /* For Firefox 3.6 to 15 */
background: linear-gradient($angle, $colorBegin, $colorEnd); /* Standard syntax */
}
@friedrith
friedrith / index.js
Last active December 14, 2017 06:28
// ...
import SVG from 'svg.js'
if (document.getElementById('drawing')) { // check if drawing element is present
if (SVG.supported) { // check if SVG is supported by this browser
const draw = SVG('drawing').size(800, 600) // draw the main workspace
// create a group to include laptop images
const group = draw.group()