Viewing Ken Burns Effect Coding Issue

Ken Burns Effect Coding Issue



User: Les C. 8 years ago
--Roddy

I finally got the page up dumping the code and using the Slippry link you posted earlier with modifications.

Two final questions:

1. How do I get the Ken Burns to stop and freeze after the first slide (at the same zoom level it finishes at—the header code is below, or with an extraordinarily long pause between slides)?

2. My image is not showing up sharp on a Retina screen despite giving it an @2x addition. What can I do?

Any feedback would be appreciated.


LC


CSS

<style>

@-webkit-keyframes left-right {
0% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); }
100% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); } }
@-moz-keyframes left-right {
0% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); }
100% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); } }
@-ms-keyframes left-right {
0% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); }
100% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); } }
@keyframes left-right {
0% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); }
100% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); } }
@-webkit-keyframes right-left {
0% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); }
100% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); } }
@-moz-keyframes right-left {
0% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); }
100% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); } }
@-ms-keyframes right-left {
0% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); }
100% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); } }
@keyframes right-left {
0% {
-moz-transform: translateY(-15%) translateX(20%);
-ms-transform: translateY(-15%) translateX(20%);
-webkit-transform: translateY(-15%) translateX(20%);
transform: translateY(-15%) translateX(20%); }
100% {
-moz-transform: translateY(-20%) translateX(0%);
-ms-transform: translateY(-20%) translateX(0%);
-webkit-transform: translateY(-20%) translateX(0%);
transform: translateY(-20%) translateX(0%); } }
/* added to the original element calling slippry */
.sy-box.sy-loading {
background: url("/images/sy-loader.gif") 50% 50% no-repeat;
-moz-background-size: 32px;
-o-background-size: 32px;
-webkit-background-size: 32px;
background-size: 32px;
min-height: 40px; }
.sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
visibility: hidden; }

/* element that wraps the slides */
.sy-slides-wrap {
position: relative;
height: 100%;
width: 100%; }
.sy-slides-wrap:hover .sy-controls {
display: block; }

/* element that crops the visible area to the slides */
.sy-slides-crop {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden; }

/* list containing the slides */
.sy-list {
width: 100%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
position: absolute; }
.sy-list.horizontal {
-moz-transition: left ease;
-o-transition: left ease;
-webkit-transition: left ease;
transition: left ease; }
.sy-list.vertical {
-moz-transition: top ease;
-o-transition: top ease;
-webkit-transition: top ease;
transition: top ease; }

/* single slide */
.sy-slide {
position: absolute;
width: 100%;
z-index: 2; }
.sy-slide.kenburns {
width: 140%;
left: -30%; }
.sy-slide.kenburns.useCSS {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity; }
.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
-webkit-animation-name: right-left;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: right-left;
-moz-animation-fill-mode: forwards;
-o-animation-name: right-left;
-o-animation-fill-mode: forwards;
animation-name: right-left;
animation-fill-mode: forwards; }
.sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
-webkit-animation-name: left-right;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: left-right;
-moz-animation-fill-mode: forwards;
-o-animation-name: left-right;
-o-animation-fill-mode: forwards;
animation-name: left-right;
animation-fill-mode: forwards; }
.sy-slide.sy-active {
z-index: 3; }
.sy-slide > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0; }
.sy-slide > a {
margin: 0;
padding: 0;
display: block;
width: 100%; }
.sy-slide > a > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0; }

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
width: 100%; }
.sy-filler.ready {
-moz-transition: padding 6000ms ease;
-o-transition: padding 6000ms ease;
-webkit-transition: padding 6000ms ease;
transition: padding 6000ms ease; }

</style>



Snippet


<link rel="stylesheet" href="slippry.css" />

<div style="width:100%;max-width:2350px; margin:0 auto">

<ul id="pictures-demo">
<li><img src="{!-ASSETSPATH-!}Images/Westside-Color@2x.png" height="490" width="2350" /alt="alt 1"></li>
<li><img src="{!-ASSETSPATH-!}Images/Westside-Color@2x.png" height="490" width="2350" /alt="alt 1"></li>
</ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{!-ASSETSPATH-!}External%20Files/slippry.min.js"></script>

<script>
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider" />',
adaptiveHeight: false,
captions: false,
pager: false,
controls: false,
autoHover: false,
pause:35000,
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom:100,
speed:10
});
</script>

Last edit 8 years ago
User: Les C. 8 years ago
       

Last edit 8 years ago
User: Roddy 8 years ago
The link to the stylesheet has to be in in the head code box and placed before your internal CSS....

<link rel="stylesheet" href="slippry.css" />
<style type="text/css">
/* internal styles */
@-webkit-keyframes left-right {} and so on
</style>

Otherwise, any existing styles in the stylesheet will overwrite the styles you entered into the internal styles. If you want to use code injection, you should take the time to learn about what code goes where and the order in which code is placed in the HTML doc.

A retina image@2x is meaningless in this context. You have set the image as height="490" width="2350" so you need to load an image which is 4700px wide by 980px high.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

Perfect. Thank you :)


LC
User: Les C. 8 years ago
--Roddy

As a follow up, does a retina image have to be exactly double the specified size, or can it be larger?


LC
User: Roddy 8 years ago
Retina is an Apple thing which is kind of redundant now due to the fact that srcset is supported by all modern browsers.

Basically, "image@2x.jpg" is just an image which has twice the resolution of "image.jpg". If an image is 480 x 360px and is set in a container 480 x 360 px, it will display @1x. Place an image which is 960px x 720px into the same 480 x 360px container and it will display @2x.

You can use a larger image but there is no advantage since you will only increase the page download time.

With srcset we can specify images of different resolution like this...

<img src="image.jpg" srcset="image.jpg 1x, image.jpg 2x, image.jpg 3x, image.jpg 4x" alt="alt text">

... and the browser decides which one to load depending on the device type and its resolution..

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

Thanks for the clarification.


LC


Post Reply
You must login or signup to post.