Scrollable Agency Portfolio Grid

HTMl / Haml

[code language=”html”]
.cursor
.cursor_point
.cursor_outer
.portfolio
.portfolio_home
%div{:style => ‘position: fixed; z-index: -99; width: 2320px; height: 180%; left: 0;top: -38%;’}
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/tz8Puc4W5BM?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1"></iframe>
.portfolio_home__header
.hamburger.trigger
-(1..3).each do
.hamburger_part
.portfolio_home__title
.logo
%img.first{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clogotemp.png’}
%img.second{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clogotemp2.png’}
.page_portfolio
.portfolio_home__header
.logoMain
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cagencylogo.png’}
.nav
%ul
%li.active.trigger Our work
%li.trigger Our services
%li.trigger About us
%li.trigger Contact us
.number.black 0161 345 3464
.hamburger.black.trigger
-(1..3).each do
.hamburger_part
.slider_note
Drag through our work
.portfolio_home__work
.portfolio_home__header.work
.back

%img.trigger{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png’}
.logoMain
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/slogowhite.png’}
.nav
%ul
%li.active.trigger Our work
%li.trigger Our services
%li.trigger About us
%li.trigger Contact us
.number.white 0161 345 3464
.hamburger.white.trigger
-(1..3).each do
.hamburger_part
.slideClone
.title.f
#{‘.01’}
%br
My Protein
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/fud.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL
.title My protein rebrand and digital campaign

.slideClone
.title.f
#{‘.02’}
%br
Nike Air Max
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/nike.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL STRATEGY
.title Nike Air max video campaign 2017
.slideClone
.title.f
#{‘.03’}
%br
Apple Watch
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rpo.jpg’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DIGITAL STRATEGY
.title The new Apple Watch digital campaign 2019
.slideClone
.title.f
#{‘.04’}
%br
Jade Teriyaki
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/orangetyhing.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL STRATEGY
.title Another agency did this campaign, not us
%img.scroll{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png’}
.portfolio_home__slider
.slider_inner
.slider_inner__slide
.title
#{‘.01’}
%br
My Protein
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/fud.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL
.title My protein rebrand and digital campaign
.button
View case study
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png’}
.slider_inner__slide
.title
#{‘.02’}
%br
Nike Air Max
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/nike.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL STRATEGY
.title Nike Air max video campaign 2017
.button
View case study
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png’}
.slider_inner__slide
.title
#{‘.03’}
%br
Apple Watch
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rpo.jpg’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DIGITAL STRATEGY
.title The new Apple Watch digital campaign 2019
.button
View case study
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png’}
.slider_inner__slide
.title
#{‘.04’}
%br
Jade Teriyaki
.image
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/orangetyhing.png’, :draggable => ‘false’}
.overlay
.cats ADVERTISING DESIGN DIGITAL STRATEGY
.title Another agency did this campaign, not us
.button
View case study
%img{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png’}

%hr
%h1
We are an Independent
%span Creative Advertising
&amp;
%span Branding Agency
%img.trigger{:src => ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png’}
[/code]

CSS / SCSS

[code language=”css”]
@font-face {
font-family: ‘Hurme’;
src: url(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff2’) format(‘woff2’),
url(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff’) format(‘woff’);
font-weight: bold;
font-style: normal;
}

.content {
z-index: 2;
position: absolute;
background: red;
top: 100%;
}

$blue: #07101d;
$yellow: #ffdc25;
$globalPadding: 40px;

.dynamicCursor {
// transform-origin: 270px 0;
}
* {
box-sizing: border-box;
}

body {
background: $blue;
background-size: cover !important;
font-family: ‘Hurme’;
font-weight: 500;
user-select: none;
margin: 0;
padding: $globalPadding;
height: 100vh;
iframe {
opacity: 0;
animation: fadeInVid 1s 1s forwards;

}

.portfolio {

.slider_note {
width: 100%;
position: absolute;
color: black;
left: 0;
top: 640px;
z-index: 2;
text-align: center;
}

.slideClone {
width: 700px;
height: 450px;
margin: 0 auto;
top: 160px;
display: none;
position: fixed;
left: 0;
transition: all .5s;
right: 0;

.overlay,
.cats,
.title {
opacity: 1 !important;
}

.button {
display: none;
}

.title {
font-weight: 800;
color: $yellow;
position: relative;
z-index: 10;
font-size: 22px;
transform-style: preserve-3d;
left: 0;
}

.f {
position: relative;
top: 0;
transition: all .7s .0s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.image {
position: relative;
margin-top: 10px;
padding: 94px 94px;
height: 380px;
transform-style: preserve-3d;

img {
position: absolute;
left: 0;
z-index: -1;
top: 0;
transition: all .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);
height: 100%;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(11, 18, 27, 0.6);
z-index: -1;
opacity: 0;
transition: opacity .1s, transform .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);
}

.cats {
color: $yellow;
font-weight: 700;
font-size: 12px;
transform-style: preserve-3d;
opacity: 0;
left: 0;position: relative;
transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
}

.title {
font-weight: 800;
color: white;
width: 350px;
font-size: 28px;
margin-top: 10px;
line-height: 35px;
transform-style: preserve-3d;
position: relative;
transition: all 0.6s .2s;
margin: 22px 0 16px 0;
opacity: 0;
}

.button {
color: $blue;
font-size: 14px;
cursor: pointer;
margin-top: 14px;
background: $yellow;
float: left;
padding: 12px 20px;
transform-style: preserve-3d;
position: relative;
transition: all .6s .3s;
opacity: 0;
}
}
}

&_home {
&__work {
background: transparent;
padding: 40px;
position: fixed;
width: 100%;
z-index: 3;
position: fixed;
height: 100%;
pointer-events: none;
opacity: 0;
top: 0;
z-index: 4;
left: 0;
clip-path: polygon(calc(50% – 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% – 353px) 225px);
transition: opacity .5s .67s, -webkit-clip-path .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

&.expand {
clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);
pointer-events: all;
opacity: 1;
transition: opacity .1s, -webkit-clip-path .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

.scroll {
opacity: 1;
transition: all 0.8s 0.5s;
}
.slideClone {
img {
transition: all .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);
transform: scale(2.9)
}
.overlay {
transition: opacity .1s, transform .8s .23s cubic-bezier(0.79, -0.01, 0, 0.99);
transform: scale(2.9)
}

.title.f {
position: relative;
top: 72px;
left: 0;
transition: all .8s .4s cubic-bezier(0.79, -0.01, 0, 0.99);
}

.cats, .title {
left: -93px;
position: relative;

}

.cats {
transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
}

.title {
transition: all .8s .19s cubic-bezier(0.79, -0.01, 0, 0.99);
}

}
}
}
&__slider{
position: relative;
transform: translateX(-800px);
perspective: 900px;
perspective-origin: 50% 200px;

& .slider {
&_inner {
transform: translateY(120px);
position: absolute;
left: 0;
right: 0;
width: 30000px;
transition: all 0.8s cubic-bezier(0, 0.6, 0.25, 1);
transform-style: preserve-3d;
pointer-events: none;

&.in {
pointer-events: all;
.slider_inner__slide {
animation: sliderIn 1.1s .65s cubic-bezier(0.79,-0.01, 0, 0.99) forwards;
}
}

&__slide {
width: 700px;
height: 750px;
float: left;
margin-right: 60px;
transition: all .5s;
transform-style: preserve-3d;
transform: scale(0);

.title {
font-weight: 800;
color: #060608;
position: relative;
font-size: 22px;
transform-style: preserve-3d;
}

&:nth-of-type(2){
.image {
.overlay,
.cats,
.title,
.button {
opacity: 1;
}
}
}

.image {
position: relative;
margin-top: 10px;
padding: 94px 94px;
height: 380px;
transform-style: preserve-3d;

img {
position: absolute;
left: 0;
z-index: -1;
top: 0;
height: 100%;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(11, 18, 27, 0.7);
z-index: -1;
opacity: 0;

transition: opacity .1s, transform .8s .7s cubic-bezier(0.79, -0.01, 0, 0.99);
}

.cats {
color: $yellow;
font-weight: 700;
font-size: 12px;
left: 0;
transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
transform-style: preserve-3d;
opacity: 0;

}

.title {
font-weight: 800;
color: white;
width: 350px;
font-size: 28px;
margin-top: 10px;
line-height: 35px;
transform-style: preserve-3d;
position: relative;
transition: all 0.6s .2s;
margin: 22px 0 16px 0;
opacity: 0;
}

.button {
color: $blue;
font-size: 14px;
cursor: pointer;
margin-top: 14px;
background: $yellow;
float: left;
padding: 12px 40px 14px 20px;
transform-style: preserve-3d;
position: relative;
transition: all .6s .3s;
opacity: 0;

img {
width: 14px;
height: auto;
position: absolute;
right: 17px;
left: auto;
top: 16px;
}
}
}
}
}
}
}

&__header {
float: right;
width: 100%;

&.work {
position: relative;
z-index: 1;

ul li {
color: #fff;

&.active {
border-bottom: 2px solid $yellow;
color: $yellow;
}
}
}

ul {
padding: 0;
margin: 0;

li {
display: inline;
margin-right: 10px;

&.active {
font-size: 20px;
border-bottom: 2px solid $blue;
}

&:hover {
border-bottom: 2px solid $blue;
}
}
}

.nav {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 0;
}

& .logoMain {
float: left;
position: relative;
top: -3px;
width: 280px;

img {
width: 100% !important;
animation: none !important;
opacity: 1 !important;
}
}

& .number {
color: white;
-webkit-animation: fade 1s 2.3s forwards;
animation: fade 1s 2.3s forwards;
opacity: 0;
float: right;
position: relative;
margin-right: 80px;
top: 5px;

&.black {
color: $blue;
animation: none;
opacity: 1;
}

&.white {
color: #fff;
animation: none;
opacity: 1;
}
}

& .hamburger {
float: right;
position: absolute;
right: $globalPadding;
top: 45px;
animation: fade 1s 2.3s forwards;
opacity: 0;

height: 20px;
width: 30px;

&.black {
opacity: 1 !important;

.hamburger_part {
background: $blue;
}
}

&.white {
opacity: 1 !important;
right: 0;
top: 5px;
.hamburger_part {
background: $yellow;
}
}

&_part {

$hamburgerPartHeight: 2px;

width: 30px;
height: $hamburgerPartHeight;
position: absolute;
background: $yellow;
right:0;

@for $i from 1 through 3 {
&:nth-of-type(#{$i}) {
top: ($hamburgerPartHeight + 2) * 2 * ($i – 1);
}
}

&:last-child {
width: 20px;

}
}
}
}

&__title {
position: absolute;
bottom: $globalPadding * 2;
left: $globalPadding * 2;
max-width: 460px;

.logo {
margin-bottom: 30px;

img.first {
margin-right: 0px;
position: relative;
top: 3px;
width: 135px;
opacity: 0;
-webkit-animation: fade 1s 1s forwards;
animation: fade 1s 1s forwards;

&.out {
animation: fadeOut .4s .6s forwards;
opacity: 1;
}
}

img.second {
width: 140px;
animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;
clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);

}
}

hr {
width: 80px;
background: $yellow;
height: 2px;
border: none;
position: absolute;
left: 0;
width: 0;
top: 77px;
animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

&.out {
animation: hrOut .4s .4s forwards;
width: 70px;
}
}

.trigger {
opacity: 0;
animation: fade 1s 2.5s forwards;

&.out {
animation: fadeOut .4s 0s forwards;
}
}

h1 {
color: white;
margin-top: 60px;
line-height: 30px;
font-weight: normal;
font-size: 18px;
opacity: 0;
margin-bottom: 30px;
animation: fade 1s 1.9s forwards;

&.out {
animation: fadeOut .4s .2s forwards;
opacity: 1;
}

span {
color: $yellow;
}
}

& .page {
&_portfolio {
background: $yellow;
padding: $globalPadding;
position: fixed;
width: 100%;
z-index: 3;
position: fixed;
height: 100%;
opacity: 0;
top: 0;
left: 0;
clip-path: polygon(226px calc(100% – 262px), 359px calc(100% – 262px), 359px calc(100% – 309px), 226px calc(100% – 309px));
transition: opacity .6s 0.2s , clip-path 1s .6s cubic-bezier(0.79,-0.01, 0, 0.99);
}
}
}
}
}
}

@keyframes sliderIn {
from { transform: scale(0);}
to{ transform: scale(1);}
}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeOut {
from {opacity: 1}
to {opacity: 0}
}

@keyframes fadeInVid {
from {opacity: 0}
to {opacity: 0.1}
}

@keyframes hr {
from {width: 0;}
to {width: 70px;}
}

@keyframes hrOut {
from {width: 70px;}
to {width: 0px;}
}

@keyframes spark {
from {clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);}
to {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}
}

.scroll {
position: absolute;
left: calc(50% – 348px);
top: 458px;
transition: all 0.8s 0s;
opacity: 0;
}

.back {
position: absolute;
height: 100vh;

img {
animation: none !important;
opacity: 1 !important;
transform: rotate(90deg);
bottom: 73px !important;
position: absolute;
}
}
[/code]

JS / Babel

[code language=”js”]
$(‘.trigger’).click(function() {
$(‘.page_portfolio’).css(‘opacity’, ‘1’);
$(‘.page_portfolio’).css(‘clip-path’, ‘polygon(0 100%, 100% 100%, 100% 0%, 0 0%)’);
$(‘.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger’).addClass(‘out’);
$(‘.slider_inner’).addClass(‘in’)
setTimeout(function(){
$(‘.slider_inner’).click()

}, 2500)
});

introComplete = false;

setTimeout(function(){
introComplete = true;
}, 2500)

var scrollPosition = 0;
window.addEventListener(‘wheel’, function(e) {

if (e.deltaY > 0) {
scrollPosition += 10;
$(‘.content’).css(‘top’, -scrollPosition + ‘px’)
console.log(e.deltaY)
if(introComplete) {
$(‘.page_portfolio’).css(‘opacity’, ‘1’);
$(‘.page_portfolio’).css(‘clip-path’, ‘polygon(0 100%, 100% 100%, 100% 0%, 0 0%)’);
$(‘.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger’).addClass(‘out’);
$(‘.slider_inner’).addClass(‘in’)
setTimeout(function(){
$(‘.slider_inner’).click()

}, 2000)

}
} else {
scrollPosition -= 10;
}
});

$(‘.button’).click(function(){
$(this).parent().addClass(‘clicked’)
$(this).parent().parent().parent().addClass(‘clicked’)
//$(‘.portfolio_home__work’).css(‘opacity’, 1);
$(‘.portfolio_home__work’).addClass(‘expand’)

})

// Gross but only a demo

$(window).resize(function(){
$(‘.slider_inner’).css(‘left’, ($(document).width() / 2) – ($(‘.slider_inner__slide’).width() / 2));
})

$(‘.slider_inner’).css(‘left’, ($(document).width() / 2) – ($(‘.slider_inner__slide’).width() / 2));

var dragging = false;
var endPosition = 0;
var threshold = 100;

$(‘.slider_inner’).click(function() {
$(‘.slider_inner__slide’).css(‘animation’, ‘none’)
$(‘.slider_inner__slide’).css(‘transform’, ‘rotateY(0deg) scale(1)’)
})
$(‘.slider_inner’).mousedown(function(e) {
initX = e.clientX;
dragging = true;
//$(‘.slider_inner__slide’).css(‘animation’, ‘none’)
cursor.style.transition = `transform 0s 0s`;

console.log(cursor)
})

$(‘.slider_inner’).mousemove(function(e) {

if(dragging) {
let mouseX = e.clientX;
difference = mouseX – initX;

//$(‘.slider_inner__slide’).css(‘transform’, ‘rotateY(‘ + direction + pps / 110 + ‘deg) scale(1)’)
position = parseInt($(‘.slider_inner’).css(‘transform’).split(‘,’)[4]);
//console.log(‘position is ‘ + position)
$(‘.slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .overlay, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .title, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .cats, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .button’).css(‘opacity’, 1 -Math.abs(difference / 200))

$(‘.slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .overlay, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .title, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .cats, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .button’).css(‘transition’, ‘all .2s’)

$(‘.slider_inner’).css(‘transform’, `translateX(${difference + endPosition}px) translateY(120px)`);

}
});

// 520 -40 -600 -1150

// 560

var offset = 760;
var margin = 0;

var index = 1;

$(‘.slider_inner’).mouseup(function() {
cursor.style.transition = `transform ${cursorSettings.transitionTime} ${cursorSettings.transitionEase}, width ${cursorSettings.expandSpeed}s .2s, height ${cursorSettings.expandSpeed}s .2s, opacity 1s .2s`;
endPosition = parseInt($(‘.slider_inner’).css(‘transform’).split(‘,’)[4]);

if(difference < -160) {
console.log(‘snap to next’)
if(index < 3) {
index++;
var threshold = offset – ((offset + margin) * index);
$(‘.slider_inner’).css(‘transform’, `translateX(${threshold}px) translateY(120px)`);
endPosition = threshold;

} else {
var threshold = offset – ((offset + margin) * index);
$(‘.slider_inner’).css(‘transform’, `translateX(${threshold}px) translateY(120px)`);
endPosition = threshold;

}

} else {
if(difference > 160) {
if(index > 0) {
index–;
var threshold = offset – ((offset + margin) * index);
$(‘.slider_inner’).css(‘transform’, `translateX(${threshold}px) translateY(120px)`);
endPosition = threshold;

} else {
var threshold = offset – ((offset + margin) * index);
$(‘.slider_inner’).css(‘transform’, `translateX(${threshold}px) translateY(120px)`);
endPosition = threshold;

}

} else {
var threshold = offset – ((offset + margin) * index);
$(‘.slider_inner’).css(‘transform’, `translateX(${threshold}px) translateY(120px)`);
endPosition = threshold;

}
}

dragging = false;
console.log(‘.slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘)’)
$(‘.slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .overlay, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .title, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .cats, .slider_inner__slide:nth-of-type(‘ + parseInt(index + 1) + ‘) .image .button’).css(‘opacity’, 1)
$(‘.slider_inner__slide’).css(‘transform’, ‘rotateY(0deg) scale(1)’)
$(‘.slideClone’).hide();
$(‘.slideClone:nth-of-type(‘ + parseInt(index + 2) + ‘)’).show();
difference = 0
})

// https://gist.github.com/ripper234/5757309

function drawMouseSpeedDemo() {
var mrefreshinterval = 30; // update display every 500ms
var lastmousex=-1;
var lastmousey=-1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
var direction;

$(‘html’).mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
}
// console.log(mousex-lastmousex)

if(mousex-lastmousex > 0) {
direction = ‘+’
} else {
direction = ‘-‘
}

//console.log(direction);

lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function() {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime!=timenow) {
var pps = Math.round(mousetravel / (timenow – lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0,1);
mousetravel = 0;
//console.log(pps)
if(dragging) {
let velocity = .5 – (pps / 40000);

$(‘.slider_inner__slide’).css(‘transform’, ‘rotateY(‘ + direction + pps / 110 + ‘deg) scale(1)’)
$(‘.slider_inner__slide’).css(‘transition’, ‘all ‘ + velocity + ‘s’);
//console.log(velocity)
}

}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
}
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
};

drawMouseSpeedDemo()

/* ————————————————-

Dynamic cursor

————————————————— */

const cursorSettings = {
‘class’ : ‘dynamicCursor’,
‘size’ : ’18’,
‘expandedSize’ : ’40’,
‘expandSpeed’ : 0.4,
‘background’ : ‘rgba(161, 142, 218, 0.25)’,
‘opacity’ : ‘1’,
‘transitionTime’ : ‘1.4s’,
‘transitionEase’ : ‘cubic-bezier(0.075, 0.820, 0.165, 1.000)’,
‘borderWidth’ : ‘0’,
‘borderColor’ : ‘black’,
‘iconSize’: ’11px’,
‘iconColor’: ‘white’,
‘triggerElements’: {
‘trigger’ : {
‘className’ : ‘trigger’,
‘icon’ : ‘<i class="fa fa-plus"></i>’
},
‘trigger2’ : {
‘className’ : ‘slider_inner’,
‘icon’ : ‘<i class="fa fa-arrows-h"></i>’
}
}
}

function dynamicCursor(options) {

document.write(‘<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">’);

var hold;
cursor = document.createElement(‘div’);
let cursorIcon = document.createElement(‘div’);

cursorIcon.classList.add(‘cursorIcon’);
cursorIcon.style.position = ‘absolute’;
cursorIcon.style.fontFamily = ‘Raleway’;
cursorIcon.style.textTransform = ‘uppercase’;
cursorIcon.style.fontWeight = ‘800’;
cursorIcon.style.textAlign = ‘center’
cursorIcon.style.top = ‘50%’;
cursorIcon.style.width = ‘100%’;
cursorIcon.style.transform = ‘translateY(-50%)’;
cursorIcon.style.color = options.iconColor;
cursorIcon.style.fontSize = options.iconSize;
cursorIcon.style.opacity = 0;
cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;

cursor.classList.add(options.class);
cursor.style.boxSizing = ‘border-box’;
cursor.style.width = `${options.size}px`;
cursor.style.height = `${options.size}px`;
cursor.style.borderRadius = `${options.expandedSize}px`;
cursor.style.opacity = 0;

cursor.style.pointerEvents = ‘none’;
cursor.style.zIndex = 999;
cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width ${options.expandSpeed}s .2s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;
cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;
cursor.style.position = ‘fixed’;
cursor.style.background = options.background;

cursor.appendChild(cursorIcon);
document.body.appendChild(cursor);

setTimeout(function() {
cursor.style.opacity = options.opacity;
}, 500)

var idle;

document.onmousemove = e => {
console.log(‘test’)
x = e.pageX;
y = e.pageY;

cursor.style.opacity = options.opacity;
clearInterval(idle)

idle = setTimeout(function() {
cursor.style.opacity = 0;
}, 4000)

cursor.style.top = ‘0’;
cursor.style.left = ‘0’;
cursor.style.transform = `translateX(calc(${x}px – 50%)) translateY(calc(${y}px – 50%))`;
}

for(i in options.triggerElements) {

let trigger = $(`.${options.triggerElements[i].className}`);

console.log(trigger);

let icon = options.triggerElements[i].icon;

if(!trigger) {
console.warn(‘You dont have any triggers’);
} else {
trigger.each(function(el){

console.log()
trigger[el].style.cursor = ‘default’;
trigger[el].addEventListener(‘mouseover’, () => {
console.log(‘over’)
cursor.style.width = `${options.expandedSize}px`;
cursor.style.height = `${options.expandedSize}px`;
cursorIcon.innerHTML = icon;
cursorIcon.style.opacity = 1;

console.log($(this))

})

trigger[el].addEventListener(‘mouseout’, () => {
cursor.style.width = `${options.size}px`;
cursor.style.height = `${options.size}px`;
cursorIcon.style.opacity = 0;
})
})

}
}
}

dynamicCursor(cursorSettings);

$(‘.back’).click(function(){
$(this).parent().parent().removeClass(‘expand’)
})

// make go back from page to slider again
[/code]

The post Scrollable Agency Portfolio Grid Design appeared first on csshint - A designer hub.