hello everyone !!
does anyone know how to make flip card animations with imagegadget or another component?
like this video : https://www.soqueto.com/videos/flip.mp4
flip cards animation
Re: flip cards animation
Example-Code using jQuery Flip v1.1.1:
Greetings ... Peter
Code: Select all
Enumeration
#Window
#ContainerGadget
#Image1
#ImageGadget1
#Image2
#ImageGadget2
EndEnumeration
Procedure LoadScriptCallback()
OpenWindow(0, 0, 0, 300, 300, "", #PB_Window_ScreenCentered)
ContainerGadget(#ContainerGadget, 0, 0, 300, 300)
ImageGadget(#ImageGadget1, 50, 50, 200, 200, ImageID(#Image1))
ImageGadget(#ImageGadget2, 50, 50, 200, 200, ImageID(#Image2))
CloseGadgetList()
GID = GadgetID(#ImageGadget1)
! $(v_gid.div).addClass("front");
GID = GadgetID(#ImageGadget2)
! $(v_gid.div).addClass("back");
GID = GadgetID(#ContainerGadget)
! $(v_gid.div).flip(); // options: see https://nnattawat.github.io/flip/
EndProcedure
Procedure Loaded(Type, Filename$, ObjectId)
Static nbImages
nbImages + 1
If nbImages = 2
LoadScript("https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js", @LoadScriptCallback(), #PB_Script_JavaScript)
EndIf
EndProcedure
Procedure LoadingError(Type, Filename$, ObjectId)
Debug Filename$ + ": loading error"
EndProcedure
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())
LoadImage(#Image1, "https://picsum.photos/200/200?random=1")
LoadImage(#Image2, "https://picsum.photos/200/200?random=2")
Greetings ... Peter
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: flip cards animation
wooow, awesome Peter
great example!
thank you so much
great example!
thank you so much
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: flip cards animation
me again Peter
i am trying jquery flip, but i found a problem ... the rotation is in relation to the size of the container or the div... it feels weird...
i found this code below in html and css, that does not occur this problem... is there any way to implement the code below with SpiderBasic ?
thank you for your attention in advance
i am trying jquery flip, but i found a problem ... the rotation is in relation to the size of the container or the div... it feels weird...
i found this code below in html and css, that does not occur this problem... is there any way to implement the code below with SpiderBasic ?
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://uploaddeimagens.com.br/images/000/957/554/full/back.jpg?1497994163" alt="Avatar" style="width:300px;height:437px;">
</div>
<div class="flip-card-back">
<img src="https://uploaddeimagens.com.br/images/000/957/548/full/darkmagician.jpg?1497993902" alt="Avatar" style="width:300px;height:437px;">
</div>
</div>
</div>
</body>
</html>