hmongouachon / rgbkineticslider Goto Github PK

View Code? Open in Web Editor NEW

345.0 6.0 40.0 1.38 MB

A fully customizable webgl slider based on PixiJs and Gsap

CSS 7.00% HTML 26.34% JavaScript 66.66%

rgbkineticslider's Introduction

Kinetic slider with rgb and displacement effects

A fully customizable webgl slider based on PixiJs and Gsap.

Main features :

Swipe left or right to navigate between slides (the intensity of the effect is based on cursor swipping velocity)
Regular prev / next navigation
Background displacement effect (on images and / or texts)
Cursor displacement effect (on images and / or texts)
Background image rgb split effect
Titles and subtitles rgb split effect

Demos links on codepen :

Demo 1 on codepen
Demo 2 on codepen
Demo 3 on codepen

Edit 2021-03-23 : Demos are temporarily broken because of CORS issue w/ codepen

Markups :

<!-- slider -->
<div id="rgbKineticSlider" class="rgbKineticSlider"></div>

<!-- slider nav -->
<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>

Plugin init :

// images setup
const images = [
     "img/nature-01.jpg",
     "img/nature-02.jpg",
     "img/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²"],
]

// init plugin 
rgbKineticSlider = new rgbKineticSlider();

Plugin parameters

// images and content sources
slideImages: images, // array of images >demo size : 1920 x 1080
itemsTitles: texts, // array of titles / subtitles

// displacement images sources
backgroundDisplacementSprite: 'img/map-9.jpg', // slide displacement image 
cursorDisplacementSprite: 'img/displace-circle.png', // cursor displacement image

// cursor displacement effect 
cursorImgEffect : true, // enable cursor effect
cursorTextEffect : false, // enable cursor text effect
cursorScaleIntensity : 0.65, // cursor effect intensity
cursorMomentum : 0.14, // lower is slower

// swipe 
swipe: true, // enable swipe
swipeDistance : window.innerWidth * 0.4, // swipe distance - ex : 580
swipeScaleIntensity: 2, // scale intensity during swipping

// slide transition
slideTransitionDuration : 1, // transition duration
transitionScaleIntensity : 30, // scale intensity during transition
transitionScaleAmplitude : 160, // scale amplitude during transition

// regular navigation
nav: true, // enable navigation
navElement: '.main-nav', // set nav class


// image rgb effect
imagesRgbEffect : false, // enable img rgb effect
imagesRgbIntensity : 0.9, // set img rgb intensity
navImagesRgbIntensity : 80, // set img rgb intensity for regular nav 

// texts settings
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

Credits & dependencies

PixiJs

Pixi Filters (Collection of community-authored custom display filters for PixiJS)

Gsap

Google web font loader

imageLoaded

Images from Unsplash

(Much) inspired by Liquid Distortion Effects.

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

rgbkineticslider's People

Contributors

Stargazers

Watchers

rgbkineticslider's Issues

does not work with react or next js

it simply does not work on react or next js + there is no npm to it

Autoplay Event

How can implement autoplay?

Using non-Google Fonts

Cool plugin, but I'd like to use webfonts I've made for a site instead of fonts from Google so they match the design.

Is there a way to point to one or more TTF, EOT or WOFF files in the site structure so it uses those fonts instead?

Also, is there a way to target the title font and subtitle font on a specific slide? There is one slide where I'd need the large title font and the subtitle font to be different from the other frames.

Thanks

Multiple Sliders on One Page?

Love this its damn cool.
I was wondering if it's possible to run more than one slider on a page. What do I need to define a new set of images.
I've created another slider and set of images but if I give them a new id like:
const Firstimages =... and define them in the script
slideImages: Firstimages,

I get this error "Can't find variable: images" as the images loaded is looking for 'images'

Maybe I'm going about this the wrong way? Thanks

Jump to specific slide

Is it possible to jump to a specific slider on click of a button or slide index, just like the way hash navigation works?

Does not work in Google Chrome anymore

Since some time your slider does not work in Google Chrome and also not in Microsoft Edge
what's going on?
Would be nice if there would be an update

http://lena91567.bplaced.net/rgbkineticslider/

rtl support

hi slider didnt support rtl
for example arabic font shown reverse how can i fix that?

Remove Google Fonts implementation

Due to new general Data Protection regulation rules in my country, the implementation of google fonts on web-based projects is prohibited. I tried removing the Google Fonts implementation myself but unfortunatly I don't get an error message in the console when removing certain googleFonts code in the rgbKineticSlide.js and the Slider breaks. Is there any way I can remove the googleFonts script from the project?

Get current image Index

Can we get the current image (currentIndex) so we can perform special animations around the slider?

Adding the pagination dots to the slider?

Hi there,

first of all thanks for creating/building such a great slider 👍

Just wondered if there's anyways to add the pagination dots to the slider, please?

Thanks for your help in advance

Mosula

Autoplay and random play

Congratulations!
Great job!
Autoplay and random play would be great

Transitions between slides doesn't stop when you have just ONE slide

hello, i'm using Tourog theme for WP that's shipped with your slider.

The slider has a bug: when you have just ONE slide, for example a video, the transitions itself doesn't stop, so you have a 0.3s of first frame loaded every tot seconds.. do you know in which way i can fix this behaviour or just howto to stop automatic transitions between slides ? Thanks

Dynamic link href

Hi there,

Currently, working on a project which requires product-base lading page and wondering this rgbKineticSlider could be used to show some of products.

Is there any way that a link of a product can be put onto canvas tag and change href dynamically linking with pics and texts?

Now I'm thinking like

const links = [[
" https://name.com/cases/case1/",
"https://name.com/cases/case2/",
"https://name.com/cases/case3"
],];

var target = document.getElementById("targetLink");

and hopefully by synchronysing with nav clicking, a href may change dynamically.

Since, I'm not really JS person, I'm glad if you could provide any tips.

slide navigation before finishing animation

Hi, just wanted to let you know that we were experiencing some issues with the sliders button mode enabled.
If we clicked on the image before the animation finished we got pushed to the subpage of the slide before.

This is how we added the slide navigation:

function onClick() {
    if (currentIndex == 0) {
        window.location.href = "Projects.html";
    }
    if (currentIndex == 1) {
        window.location.href = "../movies/movies.html";
    }
    if (currentIndex == 2) {
        window.location.href = "about2.html";
    }
}

You can see how we're using it on the live webpage here.

To fix the isse we removed the currentIndex = next inside the slideTransition method and then added a currentIndex = ... to all the method calls like here

Maybe that could be an improvement as an option for the plugin natively.

Cheers,
Marc & @Nodarida

Showing black background color onloading.....

Displaying a black background color upon initial loading. For better understanding, I have included a screenshot.

canvas has no class or id

i have a project where i have multiple canvases in the html page and i cant set them all to the same property , i mean thats why we have classes and id's please add an option to add a class to the slider canvas,
or if there is already an option please tell me , tho i read the documentation and i didnt notice anything close to that

Doesn't work on Google Chrome

That's slider is cool! Unfortunately it doesn't work on google chrome, idk why but if I open the codepen's link on GC the page is white whether I check the link on Safari it works.

Does not load the slider image and texts

Hey!!! I am using your great slider, but it take 3 or 4 reloads to properly show the slider. Can you help me?