Build Javascript Accordian with special Opacity feature

  • Status: Closed
  • Præmie: $250
  • Modtagne indlæg: 9
  • Vinder: kayecandy

Konkurrencebeskrivelse

This contest is to create a JSS\CSS accordian of the type in the attached image. The key is projecting a repeatable pattern with different opacities in the segments of the accordian.


Load as a transparent iframe. It is essential to see a wallpaper image (1920x900) on the main page that sits under the accordian. Please build this into your demo adopting any wallpaper photo.

Attached below is one pattern but the pattern must be changeable.

The pattern affect must be used in each segment of the accordian.

The pattern affect must display with different opacity in each segment.

The pattern affect must display with different tints of black\grey - exactly like the prototype image.

The accordian must enable dragging image elements between segments of the accordian.

100% width of screen.

80% height of the screen.

The vertical grey lines must be exactly the same.

The vertical grey lines must be draggable.


The code must be clean, structured, minimal external frameworks.
The code might need to be called as a DIV so keep it easy to read.

The pattern\opacity must be a backgrund so that it is easy to add foreground elements later.

Each accordian segment must be its own DIV so that it's easy to populate foreground objects.

Whomever makes this first is the winner! Provided the source code is clean and structured.

You may use an external accordian library.

Anbefalede færdigheder

Arbejdsgiverfeedback

“ Very cool freelancer”

Profilbillede sunnyguptahotels, Australia.

Bedste indlæg fra denne konkurrence

Se flere indlæg

Offentlig præciseringstavle

  • sunnyguptahotels
    Konkurrencevært
    • 1 måned siden

    I have seen an entry and am likely to award it the clear winner. My advise is that no one should put any further development effort into this.

    • 1 måned siden
    1. TheGuyver2040
      TheGuyver2040
      • 1 måned siden

      Please don’t forget about your other contest.

      https://www.freelancer.com/contest/windows-file-sync-open-source-client-and-outlook-integration-1112209.html

      • 1 måned siden
  • alalfakawma
    alalfakawma
    • 1 måned siden

    Gonna work on this and submit an entry tomorrow

    • 1 måned siden
    1. sunnyguptahotels
      Konkurrencevært
      • 1 måned siden

      There are two original images in the contest brief showing what the end should look like (conceptually). It should have the pattern, varying opacities per segment (regardless if open), and the exact width proportions for each segment as shown in original image. Look in the contest brief and you'll see the images.

      • 1 måned siden
    2. alalfakawma
      alalfakawma
      • 1 måned siden

      Alright, done, please check it out here - https://codepen.io/alalfakawma/full/OjdepX/

      • 1 måned siden
  • sunnyguptahotels
    Konkurrencevært
    • 1 måned siden

    Please note some essential things:- 1. The segment width proportions in the original image must be maintained. 2. Use a B&W background image so I can judge the opacity on each segment. 3. The accordian must have some smooth tweening. The smoothness is a major aesthetic feature.

    • 1 måned siden
    1. alalfakawma
      alalfakawma
      • 1 måned siden

      Done, please check it on the same link. https://codepen.io/alalfakawma/full/OjdepX/

      • 1 måned siden
  • majumderranit81
    majumderranit81
    • 1 måned siden

    Hi there!
    I have more than 7 years of experience in front-end development as a Javascript / jQuery developer. I can give you more quality work on time. Please do not ignore me as a new profile.

    Lets have a discussion over chat.

    Thanks and regards
    Ranit Majumder

    • 1 måned siden
    1. majumderranit81
      majumderranit81
      • 1 måned siden

      sir, when user clicks on the collapsed accordian, the accordian will expand by 100% width of the screen and 100% height of the screen? as i am seeing in the picture?

      • 1 måned siden
    2. majumderranit81
      majumderranit81
      • 1 måned siden

      and sir what is use of those yellow circles?

      • 1 måned siden
  • CallanM
    CallanM
    • 1 måned siden

    What do you mean when you say the grey lines must be draggable?

    • 1 måned siden
    1. sunnyguptahotels
      Konkurrencevært
      • 1 måned siden

      The vertical grey lines that separate the accordian segments must be draggable so that the user can make the accordian segments the size they wish. However, this grey line draggable is not an absolute requirement if everything else is good.

      • 1 måned siden
  • lunagariya124rah
    lunagariya124rah
    • 1 måned siden

    working on it

    • 1 måned siden

Vis flere kommentarer

Sådan kommer du i gang med konkurrencer

  • Opret din konkurrence

    Opret din konkurrence Hurtigt og nemt

  • Få tonsvis af indlæg

    Få tonsvis af indlæg Fra hele verden

  • Vælg det bedste indlæg

    Vælg det bedste indlæg Download filerne - Nemt!

Opret en konkurrence nu eller slut dig til os i dag!