Skip to content

Instantly share code, notes, and snippets.

View JonathanDn's full-sized avatar
💭
Building Reusable Vue Components

Yonatan Doron JonathanDn

💭
Building Reusable Vue Components
106 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / burger.css
Last active March 21, 2018 17:33
CSS - animated burger-icon to X icon with vanilla JS & pure CSS - DEMO --> https://jsfiddle.net/L11kq8oh/79/
.canvas {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background-color: #3FAF82;
}
.burger-icon {
@JonathanDn
JonathanDn / rotate-card.html
Created March 21, 2018 18:51
CSS - rotating card on hover - demo --> https://jsfiddle.net/tn01wdyq/29/
<div class="card-container">
<class id="card" class="card no-animation">
<span id="text" class="text no-animation">Hover Me</span>
</class>
</div>
@JonathanDn
JonathanDn / mute.html
Created March 22, 2018 10:31
pure SCSS - active mute button - demo --> https://jsfiddle.net/n6hvfLda/49/
<div class="canvas">
<div class="mute-btn">
<div class="square"></div>
<div class="triangle-container">
<div class="triangle">
<div class="triangle-clone-border"></div>
</div>
</div>
<div class="sound-waves">
<div class="wave-1"></div>
@JonathanDn
JonathanDn / mute-btn.html
Last active March 22, 2018 14:33
SCSS - animated mute button - active / disabled - demo --> https://jsfiddle.net/n6hvfLda/121/
<div class="canvas">
<div id="mute" class="mute-btn">
<div class="square"></div>
<div class="triangle-container">
<div class="triangle">
<div class="triangle-clone-border"></div>
</div>
</div>
@JonathanDn
JonathanDn / max-min.html
Last active September 8, 2018 13:24
SCSS Animated Maximize to Minimize button and back with VanillaJS, SCSS - demo --> https://jsfiddle.net/y9waeLxg/51/
<div class="window-control-container">
<div id="minimize" class="minimize">
<div class="bottom-bar"></div>
<div class="top-bar"></div>
<div class="left-bar"></div>
<div class="right-bar"></div>
</div>
</div>
@JonathanDn
JonathanDn / pulses.html
Created March 23, 2018 11:26
SCSS - pulsing waves circles WIP - demo --> https://jsfiddle.net/zzLejgwu/55/
<div class="circle-container">
<div id="circle" class="circle">
<div class="pulsating-ring"></div>
<div class="pulsating-ring-two"></div>
<div class="pulsating-ring-three"></div>
</div>
</div>
@JonathanDn
JonathanDn / sonar-wave-click.html
Last active March 24, 2018 20:05
SCSS - sonar waves effect and contrast shift on click - demo --> https://jsfiddle.net/zzLejgwu/118/
<div class="circle-container">
<div id="circle" class="circle">
<div id="icon" class="icon-container">
<div class="icon no-animation"></div>
</div>
<div class="pulsating-ring"></div>
<div class="pulsating-ring-two"></div>
<div class="pulsating-ring-three"></div>
</div>
</div>
@JonathanDn
JonathanDn / clap-sonar.html
Last active March 26, 2018 23:04
SCSS - clap button simple sonar hover effect - demo --> https://jsfiddle.net/urft14zr/42/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
</div>
@JonathanDn
JonathanDn / clap-confeti.html
Last active March 27, 2018 10:32
SCSS - clap sonar with multiple popping confeti effect outwards on click - demo --> https://jsfiddle.net/urft14zr/106/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
<div id="particles" class="particles-container">
<div class="triangle">
<div class="square"></div>
@JonathanDn
JonathanDn / clap-sonar.html
Created March 28, 2018 06:17
SCSS - clap sonar with rotating multiple popping confeti effect outwards on click - demo --> https://jsfiddle.net/urft14zr/139/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
<div id="particles" class="particles-container">
<div class="triangle">
<div class="square"></div>