A Pen by Hadrien Mongouachon on CodePen.
Created
February 15, 2021 12:02
-
-
Save level09/99ba053f3b04e8a71619ebf30183d0d7 to your computer and use it in GitHub Desktop.
rgbKineticSlider - Demo 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 2</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">demo 1</a> | |
<a href="https://codepen.io/hmongouachon/pen/jOPNBdP" class="frame__demo frame__demo--current">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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// images setup | |
const images = [ | |
"https://kineticslider.com/_demos/rgbKineticSlider/blue-02.jpg", | |
"https://kineticslider.com/_demos/rgbKineticSlider/blue-03.jpg", | |
"https://kineticslider.com/_demos/rgbKineticSlider//blue-01.jpg", | |
]; | |
// content setup | |
const texts = []; | |
rgbKineticSlider = new rgbKineticSlider({ | |
slideImages: images, // array of images > must be 1920 x 1080 | |
// itemsTitles: texts, // array of titles / subtitles | |
backgroundDisplacementSprite: 'https://kineticslider.com/_demos/rgbKineticSlider/map-2.jpg', // slide displacement image | |
cursorDisplacementSprite: 'https://kineticslider.com/_demos/rgbKineticSlider/displace-circle.png', // cursor displacement image | |
cursorImgEffect : true, // enable cursor effect | |
cursorTextEffect : false, // enable cursor text effect | |
cursorScaleIntensity : 0.85, // cursor effect intensity | |
cursorMomentum : 0.09, // lower is slower | |
swipe: true, // enable swipe | |
swipeDistance : window.innerWidth * 0.5, // swipe distance - ex : 580 | |
swipeScaleIntensity: 1.66, // scale intensity during swipping | |
slideTransitionDuration : 1, // transition duration | |
transitionScaleIntensity : 10, // scale intensity during transition | |
transitionScaleAmplitude : 100, // scale amplitude during transition | |
nav: true, // enable navigation | |
navElement: '.main-nav', // set nav class | |
imagesRgbEffect : true, // enable img rgb effect | |
imagesRgbIntensity : 0.09, // set img rgb intensity | |
navImagesRgbIntensity : 40, // set img rgb intensity for regular nav | |
textsDisplay : false, // show title | |
textsSubTitleDisplay : false, // show subtitles | |
textsTiltEffect : false, // 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.09, // set text rgb intensity | |
// navTextsRgbIntensity : 10, // set text rgb intensity for regular nav | |
// textTitleColor : 'white', // title color | |
// textTitleSize : 125, // title size | |
// mobileTextTitleSize : 45, // title size | |
// textTitleLetterspacing : 3, // title letterspacing | |
// textSubTitleColor : 'white', // subtitle color ex : 0x000000 | |
// textSubTitleSize : 21, // subtitle size | |
// mobileTextSubTitleSize : 14, | |
// textSubTitleLetterspacing : 3, // subtitle letter spacing | |
// textSubTitleOffsetTop : 90, // subtitle offset top | |
// mobileTextSubTitleOffsetTop : 50, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* demo css */ | |
*, | |
*::after, | |
*::before { | |
box-sizing: border-box; | |
} | |
:root { | |
font-size: 15px; | |
} | |
body { | |
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