Element index - Ouija Board #72

matuzo · 2021-09-10T07:30:46Z

I want to add an element index to the website. The content isn't ready yet, but I've already added quite a lot and the basic page structure is also ready.

You can find the WIP in this branch and file.

Here's what I need:

I want the list of of letters to look like a Ouija Board.

2 rows of letters aligned along an arc.
the mouse pointer should change
No JS for the styling
mobile first (enough white space etc)
optional: additional stylistic elements that make it look more like an actual board (see image)
optional: JS to make the cursor snap when you're close to a letter
optional: make the mouse cursor always point to the top center of the board.

Ouija Board Google Images

The CSS isn't well organized, just drop it at the end of this file

simevidas · 2021-09-10T12:03:15Z

Letters along arc is doable with SVG https://twitter.com/argyleink/status/1410589757084667912

ahmadalfy · 2021-09-10T15:41:19Z

I'd give it a shot

SaptakS · 2021-09-10T15:54:10Z

I have started working on this as well.

ahmadalfy · 2021-09-10T16:49:43Z

This is what I am up to until now

This is without the outline

@matuzo is that the right direction 😅

matuzo · 2021-09-10T16:51:55Z

@ahmadalfy that looks fantastic! Do the links still work, even tough they're overlapping?

ahmadalfy · 2021-09-10T16:55:13Z

Yes they work. This is how the links look like with yellow background applied to the a tag. I could add some additional width to facilitate pointing

ahmadalfy · 2021-09-10T17:09:13Z

This is starting to look hellish

matuzo · 2021-09-10T17:11:40Z

You're killing it @ahmadalfy, great work! @SaptakS would it make sense that the two of you get in touch and share your work to get the best out of it?

ahmadalfy · 2021-09-10T17:22:34Z

I am up to collaboration for sure. You see, this is the CSS I am using at the moment

.ouija-letters {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 400px;
    transform: rotate(-64deg);
    height: 400px;
}

.ouija-letters::before {
    content: '';
    position: absolute;
        background: url(https://img.freepik.com/free-photo/texture-old-faded-vintage-paper-beige-retro-background-grunge-paper-with-spots-streaks_213524-157.jpg?size=626&ext=jpg);
    width: 600px;
    height: 300px;
    transform: rotate(64deg);
    left: -100px;
    top: 50px;
}

.ouija-letters li a {
    display: inline-block;
}

.ouija-letters li {
  font: 26px Monaco, MonoSpace;
  height: 300px;
  position: absolute;
  left: 0;
  top: -10px;
  transform-origin: bottom center;
}

.ouija-letters li:nth-child(n + 14) {
    left: 0;
    top: 40px;
    height: 250px;
}

.ouija-letters li:nth-child(1) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(2) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(3) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(4) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(5) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(6) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(7) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(8) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(9) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(10) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(11) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(12) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(13) {
	transform: rotate(120deg);
}


.ouija-letters li:nth-child(14) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(15) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(16) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(17) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(18) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(19) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(20) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(21) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(22) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(23) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(24) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(25) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(26) {
	transform: rotate(120deg);
}

No changes to the HTML, you just have to put it in the project. The text angle rotation selectors and values are based on this mixin.

I would love to see @SaptakS work and how we can collaborate.

SaptakS · 2021-09-10T17:25:28Z

Makes sense. I see @ahmadalfy has proceeded the exact same way as I was doing by rotating each alphabet. I was taking inspiration from a similar codebase. Happy to collaborate on the next steps or review the code once you are done, whichever makes more sense.

ahmadalfy · 2021-09-10T17:31:24Z

What do you think about having three rows for mobile?

SaptakS · 2021-09-10T17:34:07Z

I think 3 row is a good idea for mobile. This might be too clumsy in mobile. I think we will need to have lesser alphabets in the third row though to allow for proper spacing.

ahmadalfy · 2021-09-10T17:42:55Z

I think we will need to have lesser alphabets in the third row though to allow for proper spacing.

You mean on mobile or on desktop as well?

@matuzo pardon me, I allowed my self to go wild with this one

This is the focus style and it aligns perfectly with each anchor. Paste this code on your CSS to try it

.ouija-letters {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-64deg);
    height: 400px;
}

.ouija-letters::before {
    content: '';
    position: absolute;
        background: url(https://img.freepik.com/free-photo/texture-old-faded-vintage-paper-beige-retro-background-grunge-paper-with-spots-streaks_213524-157.jpg?size=626&ext=jpg);
    width: 600px;
    height: 300px;
  transform: rotate(64deg);
    left: -100px;
    top: 50px;
}

.ouija-letters li {
    z-index: 1;
}

.ouija-letters li:focus-within {
    z-index: 2;
}

.ouija-letters li a {
    display: inline-block;
    position: relative;
}

.ouija-letters li a:focus {
    outline: none;
}

.ouija-letters li a:focus::before {
    background: url(https://i.imgur.com/piBnrtK.png);
    background-size: 100% auto;
    position: absolute;
    width: 120px;
    height: 160px;
    content: '';
    background-repeat: no-repeat;
    top: -45px;
    left: -52px;
    z-index: 1;
}

.ouija-letters li {
  font: 26px Monaco, MonoSpace;
  height: 300px;
  position: absolute;
  left: 0;
  top: -10px;
  transform-origin: bottom center;
}

.ouija-letters li:nth-child(n + 14) { left: 0; top: 40px ; height: 250px }



.ouija-letters li:nth-child(1) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(2) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(3) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(4) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(5) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(6) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(7) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(8) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(9) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(10) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(11) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(12) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(13) {
	transform: rotate(120deg);
}


.ouija-letters li:nth-child(14) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(15) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(16) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(17) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(18) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(19) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(20) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(21) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(22) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(23) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(24) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(25) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(26) {
	transform: rotate(120deg);
}

Source image is here for attribution

SaptakS · 2021-09-10T18:01:36Z

This looks great!!! <3

You mean on mobile or on desktop as well?

Mean't for mobile

ahmadalfy · 2021-09-10T18:09:02Z

Am glad you like it. Maybe it's not aligned with the theme of the website (or maybe it's the background) ... Let's hear it from @matuzo then we proceed and implement the mobile together.

matuzo · 2021-09-10T18:37:47Z

Thank you, @ahmadalfy and @SaptakS. I love it!

By using this paper background look it doesn't align with the theme, but that's OK. Maybe adding a border and a light box-shadow will make it look more like an actual board? I think it's kinda cool that it breaks with the design and someone decided to just throw a board in there. :)

ahmadalfy · 2021-09-10T19:48:06Z

@matuzo

Maybe something like that would be more suitable 😅 Fresh from hell

SaptakS · 2021-09-10T20:25:32Z

This does look pretty cool. I am just concerned if people don't understand those are clickable links and not just a picture of a board. But given @matuzo is okay with the break of design, maybe I am just over thinking at this point.

UX wise, do we want to add a similar cursor for hover style as well? In that case, we might need to think how to point at the alphabets that are hidden behind the cursor.

ahmadalfy · 2021-09-10T20:28:24Z

All right, I pushed my code and invited @SaptakS to the repository. Feel free to make any changes you want :)

I added drop shadow filter to that focus style to make it look more realistic.

I didn't add the board image to the repository yet until we figure out which image we will use.

And this is the requirements so far:

2 rows of letters aligned along an arc.
the mouse pointer should change
No JS for the styling
mobile first (enough white space etc)
optional: additional stylistic elements that make it look more like an actual board (see image)
optional: JS to make the cursor snap when you're close to a letter
optional: make the mouse cursor always point to the top center of the board.

SaptakS · 2021-09-10T23:36:53Z

I have added responsiveness along with some cleaning of code and adding the cursor on hover as well in: ahmadalfy#1 . I haven't made the background board responsive yet since it's not finalized.

SaptakS · 2021-09-10T23:42:26Z

I took a look at the mouse cursor always pointing to the top center of the board, and it will involve a lot of hard coded positioning and rotation for desktop and mobile screen of the cursor for individual character. If we really want that, I can add it.

bafflingscience · 2021-09-11T20:42:55Z

this is all looking incredible!
such a cool concept, can't wait to try it out.

ahmadalfy · 2021-09-12T07:41:22Z

@SaptakS I will start working on the mobile, unless you made any progress on it

SaptakS · 2021-09-12T18:12:32Z

@ahmadalfy created a PR on your repo with the mobile changes I made.

ahmadalfy · 2021-09-13T09:06:09Z

@SaptakS impressive, thank you.

matuzo · 2021-09-14T18:29:31Z

@SaptakS @ahmadalfy You two are amazing, thanks a lot! I'm on vacation for the next 2,5 weeks, but I will make sure to publish is as soon as possible when I'm back again.

ahmadalfy mentioned this issue Sep 13, 2021

Element index #77

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Element index - Ouija Board #72

Element index - Ouija Board #72

matuzo commented Sep 10, 2021 •

edited

Loading

simevidas commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 •

edited

Loading

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 •

edited

Loading

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 •

edited

Loading

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 •

edited

Loading

SaptakS commented Sep 10, 2021

SaptakS commented Sep 10, 2021

bafflingscience commented Sep 11, 2021

ahmadalfy commented Sep 12, 2021

SaptakS commented Sep 12, 2021

ahmadalfy commented Sep 13, 2021

matuzo commented Sep 14, 2021

Element index - Ouija Board #72

Element index - Ouija Board #72

Comments

matuzo commented Sep 10, 2021 • edited Loading

simevidas commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 • edited Loading

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 • edited Loading

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 • edited Loading

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

matuzo commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021

SaptakS commented Sep 10, 2021

ahmadalfy commented Sep 10, 2021 • edited Loading

SaptakS commented Sep 10, 2021

SaptakS commented Sep 10, 2021

bafflingscience commented Sep 11, 2021

ahmadalfy commented Sep 12, 2021

SaptakS commented Sep 12, 2021

ahmadalfy commented Sep 13, 2021

matuzo commented Sep 14, 2021

matuzo commented Sep 10, 2021 •

edited

Loading

ahmadalfy commented Sep 10, 2021 •

edited

Loading

ahmadalfy commented Sep 10, 2021 •

edited

Loading

ahmadalfy commented Sep 10, 2021 •

edited

Loading

ahmadalfy commented Sep 10, 2021 •

edited

Loading