Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
L'oreal Flip Demo Code
<style>
.sunflower .mobilBackground{
margin-top: 7%
}
.mobilBackground{
backface-visibility: hidden;
}
</style>
<script>
oio.init(function() {
// 2nd Scenario
$('section.entry.question:eq(1)').append('<div id="card" style="height:680px"><div class="front"><section style=""><div class="mobilBackground" style="backface-visibility: hidden;"><h2 style="margin-top: 15px;backface-visibility: hidden;">Hadi bize cildinden beklentini söyle!</h2><img src="http://dusuneninsanlaricin.com/wp-content/uploads/2014/08/Beautiful-Face-Woman-1050x1680.jpg" style="width: 100%; margin-bottom:15px"><div class="answers" style="padding: 0px; backface-visibility: hidden;"><div class="answer-line" id="show1" style="backface-visibility: hidden;"><h5 style="white-space: normal; word-break: break-word; backface-visibility: hidden;">Siyah noktalarım olmasa hiç fena olmazdı.</h5></div><div class="answer-line" id="show2" style="backface-visibility: hidden;"><h5 style="white-space: normal; word-break: break-word; backface-visibility: hidden;">Işıltılı, canlı ve parlak durmasını isterdim.</h5></div><div class="answer-line" id="show3" style="backface-visibility: hidden;"><h5 style="white-space: normal; word-break: break-word; backface-visibility: hidden;">Cildim biraz mat, biraz daha beslense iyi olurdu.</h5></div></div></div></section></div><div class="back"><iframe id="frame1" width="100%" height="100%" src="https://www.youtube.com/embed/2z-zRswysc8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><iframe width="100%" height="100%" id="frame2" src="https://www.youtube.com/embed/wyg8b7eZHpg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><iframe width="100%" height="100%" id="frame3" src="https://www.youtube.com/embed/d_jnfsLDk6o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></section></div></div>');
$.getScript("https://cdn.rawgit.com/nnattawat/flip/v1.1.2/dist/jquery.flip.min.js",function(){
$("#card").flip({ trigger: 'manual' });
$("#card .back").hide();
$("#frame1").hide();
$("#frame2").hide();
$("#frame3").hide();
})
$("#show1").on("click touchstart",function(){
$("#frame1").show();
$("#card .back").show();
$("#card .front").hide();
$("#card").flip(true);
});
$("#show2").on("click touchstart",function(){
$("#frame2").show();
$("#card .back").show();
$("#card .front").hide();
$("#card").flip(true);
});
$("#show3").on("click touchstart",function(){
$("#frame3").show();
$("#card .back").show();
$("#card .front").hide();
$("#card").flip(true);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.