Add Key burn effect on image or Slide show

1

On the site http://provence-corner.fr, i have a "slowly zoom effect " on image (key burns).
How to place my code on a image or a slideshow on Sparkle ??

.SlideShowContentPanel img { -webkit-animation: burns 50s; animation: burns 50s; -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; } @-webkit-keyframes burns { from { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } to { -webkit-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } } @keyframes burns { from { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } to { -webkit-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } }
2 Likes
2

Ekran Resmi 2020-12-18 13.46.31
Ekran Resmi 2020-12-18 13.46.31779Ă—508 71.7 KB

1- Site settings > Miscellenous > Code Integration (check) Allow HTML element id customization

.
Ekran Resmi 2020-12-18 13.48.29
2- Add wide box (content image) and add id SlideShowContentPanel in code integration in Arrange Panel

.
Ekran Resmi 2020-12-18 13.50.52
3- Add Embed (Menubar Insert > Embed)

.
Ekran Resmi 2020-12-18 13.52.12
4- Add this code in embed element and press save button.

<style>
#SlideShowContentPanel  { -webkit-animation: burns 50s; animation: burns 50s; -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; } @-webkit-keyframes burns { from { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } to { -webkit-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } } @keyframes burns { from { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } to { -webkit-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } }</style>

.
5- that’s all…

3 Likes
3

Ohhhhhhh YES !! Thanks Selcuk ! Thanks !!!

1 Like
4

Selcuk.
The file at this link is a test ( https://www.dropbox.com/s/r0fkjf1xe3tdibq/TEST.sparkle?dl=0 )
I placed a zoom effect (in addition to a height: 100vh;) to have the same effect as on www.provence-corner.fr But I do not understand why on my example Sparkle, the zoom effect is applies to everything on top of the image (like the menu). However the menu does not have the same ID
I dont unsderstand ?

5

Because we give the effect to the whole div when we should have to give it to the img tag inside the div. If you add the image gallery instead of the wide box and change the #full in the embed code to #full img, the problem will disappear.

6

Coding questions etc etc. But note that a safari bug in some cases prevents an image from fully loading if a transform is applied to the img instead of the enclosing picture.

7

Lovely website you built! Photos are superb! My mouth is watering after seeing your olives! Nous aimons Provence!

1 Like
8

I must be too stupid, can’t I? I can’t combine full height and key burn on the same slideshow object?

9

http://provence-corner.fr/ haven’t bug in Safari !

10

Just for future reference - and for others who may want to know the effect name, it’s called, “Ken Burns”. He’s a filmmaker who somehow trademarked the pan-zoom effect on still images for film.

2 Likes
11

@DesignDealer, Hey you did a great job on your site! :slight_smile: Well done! :slight_smile:

1 Like
12

Is it the same Ken Burns that did that marvellous Civil War documentary series years ago?

13

Hi, great insight here - could you elaborate on the code to img zoom only (and not div) zoom as the dropbox file has been deleted ! Thanks in advance. (Any additional web resources for fancy button hover transitions etc welcome too :+1:t3:)

14

Yes Jazzbird, thats him!

1 Like
15

Really a phantastic site. Great job DesignDealer

1 Like