Skip to content

Instantly share code, notes, and snippets.

@bozzin

bozzin/index.html

Last active February 11, 2020 01:20
Show Gist options
  • Save bozzin/d4b0df3ed1d7cc59b79ba2b31e860f75 to your computer and use it in GitHub Desktop.
Save bozzin/d4b0df3ed1d7cc59b79ba2b31e860f75 to your computer and use it in GitHub Desktop.
Download ZIP
rgbKineticSlider - Demo 1
Raw
index.html
<body class="demo-1 loading">
<main>
<div class="message">Some message for mobile (if needed).</div>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">rgbKineticSlider</h1>
<p class="frame__tagline">Demo 1</a></p>
</div>
<div class="frame__links">
<a href="https://github.com/hmongouachon/rgbKineticSlider">View this project on GitHub</a>
</div>
<div class="frame__demos">
<a href="https://codepen.io/hmongouachon/pen/QWbLpzW" class="frame__demo frame__demo--current">demo 1</a>
<a href="https://codepen.io/hmongouachon/pen/jOPNBdP" class="frame__demo">demo 2</a>
<a href="https://codepen.io/hmongouachon/pen/eYNOvxB" class="frame__demo">demo 3</a>
</div>
</div>
<div class="content">
<div id="rgbKineticSlider" class="rgbKineticSlider"></div>
<nav>
<a href="#" class="main-nav prev" data-nav="previous">Prev <span></span></a>
<a href="#" class="main-nav next" data-nav="next">Next <span></span></a>
</nav>
<span class="notice">Swipe left... or right</span>
</div>
</main>
</body>
Raw
script.js
// images setup
const images = [
"http://hmongouachon.com/_demos/rgbKineticSlider/nature-01.jpg",
"http://hmongouachon.com/_demos/rgbKineticSlider/nature-02.jpg",
"http://hmongouachon.com/_demos/rgbKineticSlider/nature-03.jpg",
];
// content setup
const texts = [
["Earth", "Surface gravity‎: ‎9.807 m/s²"],
["Mars", "Surface gravity‎: ‎3.711 m/s²"],
["Venus", "Surface gravity‎: ‎8.87 m/s²"],
]
rgbKineticSlider = new rgbKineticSlider({
slideImages: images, // array of images > must be 1920 x 1080
itemsTitles: texts, // array of titles / subtitles
backgroundDisplacementSprite: 'http://hmongouachon.com/_demos/rgbKineticSlider/map-9.jpg', // slide displacement image
cursorDisplacementSprite: 'http://hmongouachon.com/_demos/rgbKineticSlider/displace-circle.png', // cursor displacement image
cursorImgEffect : true, // enable cursor effect
cursorTextEffect : false, // enable cursor text effect
cursorScaleIntensity : 0.65, // cursor effect intensity
cursorMomentum : 0.14, // lower is slower
swipe: true, // enable swipe
swipeDistance : window.innerWidth * 0.4, // swipe distance - ex : 580
swipeScaleIntensity: 2, // scale intensity during swipping
slideTransitionDuration : 1, // transition duration
transitionScaleIntensity : 30, // scale intensity during transition
transitionScaleAmplitude : 160, // scale amplitude during transition
nav: true, // enable navigation
navElement: '.main-nav', // set nav class
imagesRgbEffect : false, // enable img rgb effect
imagesRgbIntensity : 0.9, // set img rgb intensity
navImagesRgbIntensity : 80, // set img rgb intensity for regular nav
textsDisplay : true, // show title
textsSubTitleDisplay : true, // show subtitles
textsTiltEffect : true, // enable text tilt
googleFonts : ['Playfair Display:700', 'Roboto:400'], // select google font to use
buttonMode : false, // enable button mode for title
textsRgbEffect : true, // enable text rgb effect
textsRgbIntensity : 0.03, // set text rgb intensity
navTextsRgbIntensity : 15, // set text rgb intensity for regular nav
textTitleColor : 'white', // title color
textTitleSize : 125, // title size
mobileTextTitleSize : 125, // title size
textTitleLetterspacing : 3, // title letterspacing
textSubTitleColor : 'white', // subtitle color ex : 0x000000
textSubTitleSize : 21, // subtitle size
mobileTextSubTitleSize : 21, // mobile subtitle size
textSubTitleLetterspacing : 2, // subtitle letter spacing
textSubTitleOffsetTop : 90, // subtitle offset top
mobileTextSubTitleOffsetTop : 90, // mobile subtitle offset top
});
Raw
scripts
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/imagesLoaded.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi-filters.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js"></script>
Raw
style.css
/* demo css */
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 15px;
}
body {
width : 100%;
height : 100%;
margin: 0;
--color-text: #aaa;
--color-bg: #fff;
--color-link: #ddd;
--color-link-hover: #fff;
color: var(--color-text);
background-color: var(--color-bg);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
content: '';
position: fixed;
z-index: 1000;
}
.js .loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}
.message {
background: var(--color-text);
color: var(--color-bg);
padding: 1rem;
text-align: center;
}
.frame {
padding: 3rem 5vw;
text-align: center;
position: relative;
z-index: 1000;
}
.frame__title {
font-size: 1rem;
margin: 0 0 1rem;
font-weight: normal;
}
.frame__links {
display: inline;
}
.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
margin-right: 1rem;
}
.frame__demos {
margin: 1rem 0;
}
.frame__demo--current,
.frame__demo--current:hover {
color: var(--color-text);
}
.content {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100vh - 13rem);
position: relative;
justify-content: flex-start;
align-items: center;
}
@media screen and (min-width: 53em) {
.message {
display: none;
}
.frame {
position: fixed;
text-align: left;
z-index: 100;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 3rem;
pointer-events: none;
grid-template-columns: 75% 25%;
grid-template-rows: auto auto auto;
grid-template-areas: 'title links'
'... ...'
'... demos';
}
.frame__title-wrap {
grid-area: title;
display: flex;
}
.frame__title {
margin: 0;
}
.frame__tagline {
position: relative;
margin: 0 0 0 1rem;
padding: 0 0 0 1rem;
opacity: 0.5;
}
.frame__demos {
margin: 0;
grid-area: demos;
justify-self: end;
}
.frame__links {
grid-area: links;
padding: 0;
justify-self: end;
}
.frame a {
pointer-events: auto;
}
.content {
height: 100vh;
justify-content: center;
}
}
/* plugin css */
.rgbKineticSlider {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
canvas {
position: absolute;
display : block;
top:0;
left : 0;
}
nav a {
color: var(--color-link-hover);
text-decoration: none;
/*margin-right: 14px;*/
position: absolute;
top: 50vh;
z-index: 1;
}
nav a:hover,
nav a:focus {
color: var(--color-link-hover);
outline: none;
}
nav span {
position: absolute;
width: 100%;
height: 1px;
background-color: var(--color-link-hover);
display: block;
margin-top: 7px;
-moz-transition: width 0.3s ease;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease;
}
nav a:hover span {
width: 0;
}
nav a.next {
right: 10vw;
}
nav a.prev {
left: 10vw;
}
.notice {
text-decoration: none;
/*margin-right: 14px;*/
position: absolute;
bottom: 3rem;
left: 3rem;
z-index: 1;
color: var(--color-link);
}
@media screen and (max-width: 53em) {
nav a {
top : auto;
bottom : 3rem;
}
.notice {
bottom: auto;
top: 2rem;
left : 10vw;
left: 3rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment