Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

YouTube Regrets - newsletter button and style tweaks #3754

Merged
merged 8 commits into from
Oct 10, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

{% load wagtailcore_tags wagtailimages_tags %}

<div class="youtube-regret mb-5">
{% image value.image original class="mb-3" alt=value.imageAltText %}
<h2>{{index|stringformat:"02d"}}: {{ value.headline }}</h2>
<div class="youtube-regret">
{% image value.image original class="mb-4" alt=value.imageAltText %}
<h2 class="mb-4">{{index|stringformat:"02d"}}: {{ value.headline }}</h2>
{{ value.story|linebreaks }}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@
<p>{{text}}</p>
{% endfor %}
</div>
<div class="intro-button-wrapper">
<button class="btn btn-primary btn-newsletter hidden-md-down mx-auto d-none">Join Mozilla</button>
</div>
</div>

<figure class="scroll-hint text-center d-none">
Expand Down
20 changes: 12 additions & 8 deletions source/js/nav-newsletter.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,15 @@ class NavNewsletter {
});
}

buttonDesktopClickHandler(event) {
if (!this.isShown) {
event.stopPropagation();
this.expandDesktopNewsletter();
} else {
this.closeDesktopNewsletter();
}
}

init(foundationSiteURL, csrfToken) {
// some DOM nodes do not exist, return
if (!this.checkDomNodes()) return;
Expand All @@ -122,13 +131,8 @@ class NavNewsletter {

// For desktop+ version:
// make 'buttonDesktop' the trigger to open newsletter section
elements.buttonDesktop.addEventListener("click", event => {
if (!this.isShown) {
event.stopPropagation();
this.expandDesktopNewsletter();
} else {
this.closeDesktopNewsletter();
}
elements.buttonDesktop.addEventListener(`click`, event => {
this.buttonDesktopClickHandler(event);
});

// For mobile version:
Expand All @@ -140,7 +144,7 @@ class NavNewsletter {
// For mobile version:
// make 'buttonMobile' the trigger to show newsletter section
elements.buttonMobile.addEventListener("click", () => {
navNewsletter.expandMobileNewsletter();
this.expandMobileNewsletter();
});
}
}
Expand Down
94 changes: 65 additions & 29 deletions source/js/youtube-regrets.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@ import navNewsletter from "./nav-newsletter.js";

// factor for bringing image blocks closer to perspective origin
const ZOOM_FACTOR = 2.5;
// where on the z-axis do we want the rings to start spread out
const RING_DEPTH_FACTOR = 1 / 4;
// speed factors
const TEXT_SPEED_FACTOR = 0.7;
const BLOCK_SPEED_FACTOR = 0.8;
const RING_SPEED_FACTOR = 0.6;

let elements = {
introViewport: `#view-youtube-regrets .intro-viewport`,
blocks: `#view-youtube-regrets .intro-viewport .block`,
rings: `#view-youtube-regrets .intro-viewport .ring`,
introText: `#view-youtube-regrets .intro-viewport .intro-text p`,
scrollHint: `#view-youtube-regrets .intro-viewport .scroll-hint`
scrollHint: `#view-youtube-regrets .intro-viewport .scroll-hint`,
newsletterButton: `#view-youtube-regrets .intro-viewport .btn-newsletter`
};

class YouTubeRegretsTunnel {
Expand All @@ -25,12 +32,13 @@ class YouTubeRegretsTunnel {
setIntroTextOpacity() {
let introText = elements.introText;
let length = introText.length;
let speedFactor = length / elements.blocks.length;
let baseUnit = this.introScrollHeight * speedFactor;
let textToBlockRatio = length / elements.blocks.length;
let totalScrollDistance =
(this.introScrollHeight * textToBlockRatio) / TEXT_SPEED_FACTOR;

introText.forEach((item, i) => {
let positionToShow = baseUnit * (i / length);
let positionToHide = baseUnit * ((i + 1) / length);
let positionToShow = totalScrollDistance * (i / length);
let positionToHide = totalScrollDistance * ((i + 1) / length);

if (
positionToShow <= this.lastPageYOffset &&
Expand All @@ -46,35 +54,57 @@ class YouTubeRegretsTunnel {
item.style.opacity = 0;
}
});

this.setNewsletterButtonVisibility(totalScrollDistance);
}

/**
* Fade in image block when it's moving towards the origin.
* Fade out otherwise.
* Show newsletter signup button if intro is in current viewport.
* Hide it otherwise.
*/
setBlocksOpacity() {
setNewsletterButtonVisibility(positionTohide) {
let button = elements.newsletterButton[0];

if (window.pageYOffset >= positionTohide) {
button.classList.add(`d-none`);
} else {
button.classList.remove(`d-none`);
}
}

/**
* Set opacity for flying objects so they are become more visible
* as they come closer to the threshold we set
*/
setFlyingObjectOpacity(objects, baseGap) {
const Z_POSITION_TO_SHOW =
this.scenePerspective - baseGap * Math.ceil(objects.length / 2);
let opacity = 1;

elements.blocks.forEach(item => {
objects.forEach(item => {
let matrix = window.getComputedStyle(item).transform;
let coord = this.getCoordinatefromMatrix3d(matrix);

if (coord) {
let percentToOrigin = coord.z / this.introScrollHeight;
opacity = Math.min(percentToOrigin + 1, 1);
opacity = Math.min(1 - coord.z / Z_POSITION_TO_SHOW, 1);
}

item.style.opacity = opacity;
});
}

/**
* Show rings' opacity vlaue
* Set opacity for image blocks
*/
setBlocksOpacity() {
this.setFlyingObjectOpacity(elements.blocks, this.baseBlockGap);
}

/**
* Set opacity for rings
*/
setRingsOpacity() {
elements.rings.forEach(ring => {
ring.style.opacity = 0.5;
});
this.setFlyingObjectOpacity(elements.rings, this.baseRingGap);
}

/**
Expand All @@ -84,15 +114,17 @@ class YouTubeRegretsTunnel {
this.lastPageYOffset = window.pageYOffset;

let blocksSpeedFactor = elements.blocks.length / elements.introText.length;
let ringsSpeedFactor = (this.scenePerspective / this.sceneDepth) * 1.2;

this.updateCSSCustomProperty(
`--blockZTranslate`,
(this.lastPageYOffset * blocksSpeedFactor) / ZOOM_FACTOR
((this.lastPageYOffset * blocksSpeedFactor) / ZOOM_FACTOR) *
BLOCK_SPEED_FACTOR
);
this.updateCSSCustomProperty(
`--ringZTranslate`,
this.lastPageYOffset * ringsSpeedFactor
((this.lastPageYOffset * RING_DEPTH_FACTOR * blocksSpeedFactor) /
ZOOM_FACTOR) *
RING_SPEED_FACTOR
);
}

Expand Down Expand Up @@ -128,22 +160,22 @@ class YouTubeRegretsTunnel {
);
this.scenePerspective = scenePerspective;

// depth of the scene
this.sceneDepth = window.innerHeight * 3;

// the total scroll distance users have to scroll in order to get through the intro tunnel
this.introScrollHeight = window.innerHeight * 5;
this.introScrollHeight = this.sceneDepth + this.scenePerspective;

// depth of the scene
this.sceneDepth = this.introScrollHeight - window.innerHeight;
this.baseBlockGap = this.sceneDepth / elements.blocks.length / ZOOM_FACTOR;
this.baseRingGap =
(this.sceneDepth * RING_DEPTH_FACTOR) /
elements.rings.length /
ZOOM_FACTOR;

// update CSS custom properties
this.updateCSSCustomProperty(`--sceneDepth`, this.sceneDepth);
this.updateCSSCustomProperty(
`--baseBlockGap`,
this.sceneDepth / elements.blocks.length / ZOOM_FACTOR
);
this.updateCSSCustomProperty(
`--baseRingGap`,
this.scenePerspective / elements.rings.length
);
this.updateCSSCustomProperty(`--baseBlockGap`, this.baseBlockGap);
this.updateCSSCustomProperty(`--baseRingGap`, this.baseRingGap);
}

/**
Expand Down Expand Up @@ -195,6 +227,10 @@ class YouTubeRegretsTunnel {
return;
}

elements.newsletterButton[0].addEventListener(`click`, event =>
navNewsletter.buttonDesktopClickHandler(event)
);

this.setSceneDepth();
this.setObjectsOpacity();
this.toggleScrollHint();
Expand Down
55 changes: 41 additions & 14 deletions source/sass/views/youtube-regrets.scss
Original file line number Diff line number Diff line change
Expand Up @@ -73,43 +73,43 @@
}

&:nth-child(1) {
transform: translate3D(-70%, 220%, get-block-z-translate(1));
transform: translate3D(-20%, 250%, get-block-z-translate(1));
}

&:nth-child(2) {
transform: translate3D(200%, 240%, get-block-z-translate(2));
transform: translate3D(110%, 240%, get-block-z-translate(2));
}

&:nth-child(3) {
transform: translate3D(-200%, -290%, get-block-z-translate(3));
transform: translate3D(-80%, -50%, get-block-z-translate(3));
}

&:nth-child(4) {
transform: translate3D(230%, -230%, get-block-z-translate(4));
transform: translate3D(130%, -60%, get-block-z-translate(4));
}

&:nth-child(5) {
transform: translate3D(60%, 250%, get-block-z-translate(5));
transform: translate3D(60%, 270%, get-block-z-translate(5));
}

&:nth-child(6) {
transform: translate3D(-220%, -180%, get-block-z-translate(6));
transform: translate3D(-20%, -50%, get-block-z-translate(6));
}

&:nth-child(7) {
transform: translate3D(300%, -250%, get-block-z-translate(7));
transform: translate3D(50%, 220%, get-block-z-translate(7));
}

&:nth-child(8) {
transform: translate3D(-50%, 230%, get-block-z-translate(8));
transform: translate3D(-30%, 180%, get-block-z-translate(8));
}

&:nth-child(9) {
transform: translate3D(130%, -200%, get-block-z-translate(9));
transform: translate3D(110%, -90%, get-block-z-translate(9));
}

&:nth-child(10) {
transform: translate3D(130%, 270%, get-block-z-translate(10));
transform: translate3D(60%, 210%, get-block-z-translate(10));
}
}

Expand All @@ -130,7 +130,7 @@
1px *
(
var(--ringZTranslate) - (var(--baseRingGap) * #{$ring-index}) +
var(--scenePerspective) / 2
var(--scenePerspective)
)
);
}
Expand Down Expand Up @@ -166,14 +166,19 @@
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;

@media (min-width: $bp-md) {
justify-content: start;
}

.intro-text {
position: relative;
width: 100%;
max-width: 840px;
height: 100%;
margin: auto;
height: 55%;
margin: 0 auto;
text-align: center;

p {
Expand All @@ -193,6 +198,24 @@
opacity: 0;

@include scaleText(30px, 38px, 50px, 56px);

@media (min-width: $bp-md) {
top: unset;
bottom: 10px;
}
}
}

.intro-button-wrapper {
text-align: center;

.btn.btn-primary {
background-color: $youtube-regrets-red;

@include hover-focus-active {
background-color: $youtube-regrets-lighter-red;
color: $white;
}
}
}
}
Expand All @@ -206,7 +229,7 @@
h2 {
font-family: "Changa", sans-serif;

@include scaleText(30px, 36px, 42px, 42px);
@include scaleText(30px, 36px, 38px, 42px);
}

p {
Expand Down Expand Up @@ -284,4 +307,8 @@
position: sticky;
top: 120px;
}

.youtube-regret {
margin-bottom: 80px;
}
}