Skip to content

Commit

Permalink
Add tvOS Parallax effect text layer
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Mar 28, 2017
1 parent 2ced542 commit afb6282
Show file tree
Hide file tree
Showing 10 changed files with 166 additions and 46 deletions.
67 changes: 53 additions & 14 deletions dist/spectre-exp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,8 +396,8 @@
.parallax .parallax-content {
box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3);
height: auto;
-webkit-transform: perspective(50rem);
transform: perspective(50rem);
-webkit-transform: perspective(100rem);
transform: perspective(100rem);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all .4s ease;
Expand All @@ -412,66 +412,105 @@
top: 0;
width: 100%;
}
.parallax .parallax-front {
-webkit-align-items: center;
align-items: center;
color: #fff;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-align: center;
-ms-flex-pack: center;
height: 100%;
-webkit-justify-content: center;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
top: 0;
-webkit-transform: translateZ(10rem);
transform: translateZ(10rem);
transition: all .4s ease;
width: 100%;
z-index: 1;
}
.parallax .parallax-top-left {
height: 50%;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-top-left:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
-webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
}
.parallax .parallax-top-left:hover ~ .parallax-content::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
transform: translate3d(-.4rem, -.4rem, 10rem);
}
.parallax .parallax-top-right {
height: 50%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-top-right:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
-webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
}
.parallax .parallax-top-right:hover ~ .parallax-content::before {
background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(.4rem, -.4rem, 10rem);
transform: translate3d(.4rem, -.4rem, 10rem);
}
.parallax .parallax-bottom-left {
bottom: 0;
height: 50%;
left: 0;
position: absolute;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-bottom-left:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
-webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
}
.parallax .parallax-bottom-left:hover ~ .parallax-content::before {
background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(-.4rem, .4rem, 10rem);
transform: translate3d(-.4rem, .4rem, 10rem);
}
.parallax .parallax-bottom-right {
bottom: 0;
height: 50%;
position: absolute;
right: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-bottom-right:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
-webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
}
.parallax .parallax-bottom-right:hover ~ .parallax-content::before {
background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(.4rem, .4rem, 10rem);
transform: translate3d(.4rem, .4rem, 10rem);
}
.progress {
-webkit-appearance: none;
-moz-appearance: none;
Expand Down
2 changes: 1 addition & 1 deletion dist/spectre-exp.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -535,7 +535,7 @@
&lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle&quot;</span>&gt;Software and hardware&lt;<span class="tag">/h6</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
To make a contribution to the world by making tools for the mind that advance humankind.
Empower every person and every organization on the planet to achieve more.
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
Expand Down
2 changes: 1 addition & 1 deletion docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
padding: 0;
}
.grid-header .navbar-brand {
color: #50596c;
color: #5b657a;
}
.grid-header .btn-link {
color: #667189;
Expand Down
2 changes: 1 addition & 1 deletion docs/css/docs.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 53 additions & 14 deletions docs/css/spectre-exp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,8 +396,8 @@
.parallax .parallax-content {
box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3);
height: auto;
-webkit-transform: perspective(50rem);
transform: perspective(50rem);
-webkit-transform: perspective(100rem);
transform: perspective(100rem);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all .4s ease;
Expand All @@ -412,66 +412,105 @@
top: 0;
width: 100%;
}
.parallax .parallax-front {
-webkit-align-items: center;
align-items: center;
color: #fff;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-align: center;
-ms-flex-pack: center;
height: 100%;
-webkit-justify-content: center;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
top: 0;
-webkit-transform: translateZ(10rem);
transform: translateZ(10rem);
transition: all .4s ease;
width: 100%;
z-index: 1;
}
.parallax .parallax-top-left {
height: 50%;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-top-left:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
-webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
}
.parallax .parallax-top-left:hover ~ .parallax-content::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
transform: translate3d(-.4rem, -.4rem, 10rem);
}
.parallax .parallax-top-right {
height: 50%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-top-right:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
-webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
}
.parallax .parallax-top-right:hover ~ .parallax-content::before {
background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(.4rem, -.4rem, 10rem);
transform: translate3d(.4rem, -.4rem, 10rem);
}
.parallax .parallax-bottom-left {
bottom: 0;
height: 50%;
left: 0;
position: absolute;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-bottom-left:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
-webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
}
.parallax .parallax-bottom-left:hover ~ .parallax-content::before {
background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(-.4rem, .4rem, 10rem);
transform: translate3d(-.4rem, .4rem, 10rem);
}
.parallax .parallax-bottom-right {
bottom: 0;
height: 50%;
position: absolute;
right: 0;
width: 50%;
z-index: 1;
z-index: 300;
}
.parallax .parallax-bottom-right:hover ~ .parallax-content {
-webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
-webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
}
.parallax .parallax-bottom-right:hover ~ .parallax-content::before {
background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
}
.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-webkit-transform: translate3d(.4rem, .4rem, 10rem);
transform: translate3d(.4rem, .4rem, 10rem);
}
.progress {
-webkit-appearance: none;
-moz-appearance: none;
Expand Down
Loading

0 comments on commit afb6282

Please sign in to comment.