Parallax Flipping Cards (Codepen)

I Need Help
1

Hello Blocsapper, I want to “create” this PARALLAX FLIPPING CARDS by using the “Code Editor”.

Codepen PARALLAX Flipping Cards

After I’ve changed the original code so that I only have three cards, the preview looks like this:

The text of the first card is on the left side, the text of the center card is center an the text of the right card is on the right side. Also all three cards rotate at the same time.

Can tell/show me, what I’m doing wrong?

I would like to understand it so much.

2

These are really cool. I would like to know how to bring that into Blocs. Also can the card have a hyper link when click on?

3

You likely removed something you needed or have missed something, you haven’t shown what you did, so it hard to tell.

Possible, but then you won’t have the effect on touch devices. You could add a btn though.

4

I think a button would ruin the look.

5

But if the card is a link you can’t click to rotate on touch devices :smile:

1 Like
7

Hello Jerry, one card is no problem. The Problems occur when more than one card is installed.

8 
<div class="wrapper">
  <div class="cols">
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://unsplash.it/500/500/)">
						<div class="inner">
							<p>Diligord</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
						  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="url(https://unsplash.it/511/511/)">
						<div class="inner">
							<p>Rocogged</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://unsplash.it/502/502/)">
						<div class="inner">
							<p>Strizzes</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://unsplash.it/503/503/)">
						<div class="inner">
							<p>Clossyo</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>
 </div>

By using the above “html-code” on Codepen, the cards are correct. … using the same “html-code” in Blocs in a STRUCTURE ONE COLUMN with Code Widget Bric, the cards are not correct.

The CSS-Code is originally imported in Site header.

10

I don‘t know anything about coding. Can you please help me? I don’t want the finished result. Rather, the way to the goal. This is the only way I can learn. Thank you.

1 Like
11

Very Cool, Jerry

Does this mean you did make a hyperlink that would open say a video, audio or a website?

12

Adding a link is very straight forward. Just wrap a div in a tags.

13

Like this:

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

or

 <a href="#" target="_blank">
    <div class="link"></div>
  </a>
1 Like
14

The _blank will make it open in another tab.

16

Hello Jerry, I Hope you enjoyed the Drink in the shade of a coconut Palm… :wink:
Thank you for your effort to explicitly show me the way to the goal. I was able to follow you up to the class-manager. Now I don’t know what to do. :woozy_face: How do I import CSS from the project-notes into the corresponding Blocks? Thank you very much for your support, which I greatly appreciate. And also the patience you show to make me (Grandpa :older_man:) happy. :+1:

18

Thank you so much!!! :person_raising_hand:

19

Is this correct?

ontouchstart="this.classList.toggle('hover');">
				<div class="container">
**<div onclick="location.href='http://armpullers.com';" style="cursor: pointer;"></div>**
					<div class="front"
21

Hi Jerry,
I so much appreciated your help. I was messing around with CodePen changing various things. It was a fun experience.
Things I could not do:

  1. make the cards have different images.
  2. make the whole card clickable.

Question I have your Fancy Card can I edit that Bloc easier than CodePen? Since I am not too familiar with the way you set it up, I found it difficult to work with.
Would you be willing to take a look at my html & css that I toyed with? If not it’s okay, I realize how busy you can.